tapes.js

$(document).ready(function () {

    var tableTapes = $('#tableTapes').DataTable({
        paging: true,
        retrieve: true,
        searching: true,
        processing: true,
        serverSide: true,
        info: true,
        pageLength: 10,
        order: [[5, 'desc']],
        select: {
            "style": "os",
            selector: 'td:not(:last-child)'
        },
        ajax: {
            dataType: 'json',
            type: 'POST',
            url: ajaxTapesContentUrl,
        },
        columns: [
            { data: 'label' },
            { data: 'modeleid.nom' },
            {
                data: 'statutid.color',
                render: function (data, type, row) {
                    let statut = row.statutid.statut;
                    let color = row.statutid.color;
                    return '<span class="badge bg-' + color + ' text-white small">' + statut + '</span>';
                }
            },
            { data: 'serviceid.nom' },
            { data: 'library.nom' },
            {
                data: 'datecreation',
                render: function (data, type, row) {
                    let datetime = moment(data).format('YYYY-MM-DD HH:mm');
                    return '<span class="badge bg-info text-white small">' + datetime +  '</span>';
                }
            },

            {
                data: 'tapeid',
                orderable: false,
                searchable: false,
                render: function (data, type) {
                    return '<a id="tape_' + data + '" class="open_details me-2" href="#"><i class="fas fa-search-plus"></i></a>\n' +
                        '<div class="modal" id="modal_' + data + '" tabindex="-1" role="dialog" aria-labelledby="modal_' + data + '" aria-modal="true">\n' +
                        '    <div class="modal-dialog">\n' +
                        '        <div class="modal-content">\n' +
                        '            <div class="modal-header">\n' +
                        '                <h4 class="modal-title" id="title_modal_' + data + '"></h4>\n' +
                        '                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>\n' +
                        '            </div>\n' +
                        '            <div class="modal-body" id="content_modal_' + data + '">\n' +
                        '            </div>\n' +
                        '            <div class="modal-footer">\n' +
                        '                <button type="button" class="btn btn-sm btn-primary" data-bs-dismiss="modal">Fermer</button>\n' +
                        '            </div>\n' +
                        '        </div>\n' +
                        '    </div>\n' +
                        '</div>';
                }
            },
        ],
        initComplete: function () {
            var cpt=0;
            this.api().columns([1,2,3,4]).every(function () {
                var column = this;
                cpt++;

                var header = $(column.header()).html();

                var select = $('<select class="form-select"><option value=""></option></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );

                        column
                            .search(val ?  val : '')
                            .draw();
                    });

                if(header == 'Modele') {

                    var entries = dropDownCollection.modeles.content;

                    $.each(entries, function(key, entry){
                        select.append( '<option value="' + entry.modelid + '">' + entry.nom + '</option>' );
                    });
                }

                if(header == 'Service') {

                    var entries = dropDownCollection.services.content;

                    $.each(entries, function(key, entry){
                        select.append( '<option value="' + entry.serviceid + '">' + entry.nom + '</option>' );
                    });
                }

                if(header == 'Statut') {

                    var entries = dropDownCollection.statuts.content;

                    $.each(entries, function(key, entry){
                        select.append( '<option value="' + entry.statutid + '">' + entry.statut + '</option>' );
                    });
                }

                if(header == 'Librairie') {

                    var entries = dropDownCollection.librairies.content;

                    $.each(entries, function(key, entry){
                        select.append( '<option value="' + entry.librairieid + '">' + entry.nom + '</option>' );
                    });
                }

            });

        }
    },

);

    $('#modal_updates').on('click', 'button.valid_maj', function () {

        var service = $('#service').val();
        var statut = $('#statut').val();
        var description = $('#description').val();
        var commentaire = $('#comment').val();
        var listids = [];

        $('tr.selected').each(function () {
            listids.push($(this).find('td:last-child a').attr('id').split('tape_')[1]);
        });

        $.ajax({
            url: '/tapeMajMulti',
            type: "POST",
            dataType: "json",
            data: {
                "listeids": listids,
                "commentaire": commentaire,
                "service": service,
                "statut": statut,
                "description": description
            },
            async: true,
            success: function (data) {
                $("#modal_updates").modal("hide");

                $(".messagedanger").removeClass('d-none');
                $(".messagedanger").fadeOut(3000);

                setInterval(function () {
                    location.reload();
                }, 3000);

            },
            error: function (xhr, textStatus, errorThrown) {

                $("#messageError").removeClass('d-none');
                $("#messageError").fadeOut(1000);

            }
        })

    });

    $('#tableTapes').on('click', 'tbody tr', function() {

        if (!$(this).hasClass('selected')) {
            $("#multiple_updates").removeClass('d-none');
        }
        else {
            $("#multiple_updates").addClass('d-none');
        }
    });

    $('#tableTapes tbody').on('click', 'a.open_details', function () {

        var id = $(this).attr('id').split('tape_')[1];
        $('#modal_' + id).modal('show');

        $.ajax({
            url: '/tapeDetails',
            type: "POST",
            dataType: "json",
            data: {
                "tapeid": id
            },
            async: true,
            success: function (data) {

                $('#title_modal_' + id).html(data.title);
                $('#content_modal_' + id).html(data.history);

            }
        })
    })


})