_serverside_datatable_base.html.twig

<script src="//cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
<script src="//cdn.datatables.net/1.10.21/js/dataTables.bootstrap.min.js"></script>
<script src="//cdn.datatables.net/plug-ins/1.10.21/sorting/datetime-moment.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js"></script>
<script src="//cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.2.2/js/buttons.html5.min.js"></script>


<script>
    // Define our used dates formats
    $.fn.dataTable.moment('DD/MM/YYYY');
    $.fn.dataTable.moment('DD/MM/YYYY HH:mm');

    function resetFilters() {
        $('[id^=search_]').each(function() {
            $(this).val('');
        });
        var table = $('#table').DataTable();
        table.columns().search('');
    }

    {% set dataTableOptions = dataTableOptions|default({}) %}
    $(function () {

        {% set dataTableOptions = dataTableOptions|merge({
            language: {
                buttons: {
                    colvis: "Colonnes"
                },
                sProcessing: "Traitement en cours...",
                sSearch: "Rechercher&nbsp;:",
                sLengthMenu: "Afficher _MENU_ &eacute;l&eacute;ments",
                sInfo: "Affichage de l'&eacute;l&eacute;ment _START_ &agrave; _END_ sur _TOTAL_ &eacute;l&eacute;ments",
                sInfoEmpty: "Affichage de l'&eacute;l&eacute;ment 0 &agrave; 0 sur 0 &eacute;l&eacute;ment",
                sInfoFiltered: "(filtr&eacute; de _MAX_ &eacute;l&eacute;ments au total)",
                sInfoPostFix: "",
                sLoadingRecords: "Chargement en cours...",
                sZeroRecords: "Aucun &eacute;l&eacute;ment &agrave; afficher",
                sEmptyTable: "Aucune donn&eacute;e disponible dans le tableau",
                oPaginate: {
                    sFirst: "Premier",
                    sPrevious: "Pr&eacute;c&eacute;dent",
                    sNext: "Suivant",
                    sLast: "Dernier"
                },
                oAria: {
                    sSortAscending: ": activer pour trier la colonne par ordre croissant",
                    sSortDescending: ": activer pour trier la colonne par ordre d&eacute;croissant"
                },
                select: {
                    rows: {
                        _: "%d lignes séléctionnées",
                        0: "Aucune ligne séléctionnée",
                        1: "1 ligne séléctionnée"
                    }
                },
                thousands: " "
            },

            processing: true,
            serverSide: true,
            ajax: {
                url: route,
                type: "POST"
            },
            info : true,
            paging: true,
            lengthChange: false,
            searching: true,
            ordering: true,
            autoWidth: false,
            pageLength: app_admin_datable_default_page_length,
            recordsFiltered:  totalItem,
            recordsTotal:  totalItem,
            dom: "Bfrtip",
            stateSave: true,
        }) %}

        var options = {{ dataTableOptions|json_encode|raw }}

        var fullData = [];

        var strip = function ( str ) {
            if ( typeof str !== 'string' ) {
                return str;
            }

            // Always remove script tags
            str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );

            // Always remove comments
            str = str.replace( /<!\-\-.*?\-\->/g, '' );

            str = str.replace( /<[^>]*>/g, '' );

            str = str.replace( /^\s+|\s+$/g, '' );

            str = str.replace( /\n/g, ' ' );


            return str;
        };

        function getFullData(params) {
            console.log('params', params)
            params.start = 0;
            params.length = 1000000;
            var jsonResult = $.ajax({
                method:'post',
                url: '{{ route }}',
                data: params,
                success: function (result) {},
                async: false
            });
            var exportBody = jsonResult.responseJSON.data;
            var colNames = params.columns.map(function(c) { return c. data }).filter(i => i !== 'actions')
            console.log('colNames', colNames)
            return exportBody.map(function (el) {
                return colNames.map(function (key) {
                    return strip(el[key])
                });
            });
        }

        options.buttons[1].exportOptions.customizeData = function(d) {
            console.log('original data', d.body);

            var api = $('#table').DataTable();


            var visible = api.columns().visible();
            console.log('api.ajax', api.ajax.params())
            var params = api.ajax.params();
            params.columns = params.columns.filter(function(c, i) { return visible[i] })
            var exportBody = getFullData(params);

            console.log('full data', exportBody)
            d.body.length = 0;
            d.body.push.apply(d.body, exportBody);
        }

        $('#table').DataTable(options);

        $('.dt-buttons').append('<button id="button-reset" class="dt-button buttons-collection buttons-colvis" tabindex="0" aria-controls="table" type="button" aria-haspopup="true" aria-expanded="false"><span>Réinitialiser les filtres</span></button>');

        $('#button-reset').on('click', function() {
            resetFilters();
            var table = $('#table').DataTable();
            table.columns().search('').draw();
        })
    });

    $('#table').on( 'preInit.dt', function(e, settings) {
        resetFilters();
    });
</script>