column filtering with server side doesn't work

yggdris

Hi,
i use server side processing with my datatable, but with this server side, i can't use column filter, who work fine without server side ...

Here i create datatable :

<table id="testssp"> <thead> <tr> <th><input name="select_all" id="select-all" type="checkbox" /></th> <th>{{ _("Client")}}</th> <th>{{ _("Dossier(s)")}}</th> <th>{{ _("Type")}}</th> <th>{{ _("Début")}}</th> <th>{{ _("Fin")}}</th> <th>{{ _("Analyse") }}</th> <th>{{ _("Fréquence")}}</th> <th>{{ _("Charg. Cli.")}}</th> <th>{{ _("Dernier Rapport")}}</th> <th>{{ _("Action")}}</th> <th>{{ _("Juriste") }}</th> <th>{{ _("Status") }}</th> </tr> </thead> <tfoot> <tr> <th>multi</th> <th>{{ _("Client")}}</th> <th>{{ _("Dossier(s)")}}</th> <th>{{ _("Type")}}</th> <th>{{ _("Début")}}</th> <th>{{ _("Fin")}}</th> <th>{{ _("Analyse") }}</th> <th>{{ _("Fréquence")}}</th> <th>{{ _("Charg. Cli.")}}</th> <th>{{ _("Dernier Rapport")}}</th> <th>{{ _("Action")}}</th> <th>{{ _("Juriste") }}</th> <th>{{ _("Status") }}</th> </tr> </tfoot> <tbody> </tbody> </table>

My js :

$('#testssp tfoot th').each(function() {
        var title = $(this).text();
        $(this).html('<input type="text" placeholder="Search ' + title + '" />');
    });

    $(function() {
        var table = $('#testssp').DataTable({
            "processing": true,
            "serverSide": true,
            "pageLength": 10,
            "lengthMenu": [[5, 10, 25, 50, -1], [5, 10, 25, 50, 'All']],
            "ajax": {
                "url": "{{ path("surveillance_bo_dossier_home_tableau",{"type": 0, "client":client}) }}",
                "type": "POST",
            },
            initComplete: function() {
                var api = this.api();
                api.columns().every(function() {
                    var that = this;

                    $('input', this.footer()).on('keyup change', function() {
                        if (that.search() !== this.value) {
                            that.search(this.value).draw();
                        }
                    });
                });
            },
            "sAjaxDataProp": "data",
            "columns": [
                {data: "multi"},
                {data: "client"},
                {data: "dossier"},
                {data: "type"},
                {data: "dateD"},
                {data: "dateF"},
                {data: "analyse"},
                {data: "frequence"},
                {data: "cc"},
                {data: "dateR"},
                {data: "action"},
                {data: "jur"},
                {data: "isActif"},
            ],
            "columnDefs": [
                { "orderable": false, "targets": [0,1,2,3,4,5,6,7] },
            ],
        });

    });