How add filter column with server side processing

yggdris

Hi,

I can't do working my filters column when i use the server side processing, i don't understand why.

My html :

<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] },
        ],
    });

});

So here i have server side processing, who work fine, but my column filter doesn't work, i need to do 

"serverSide": false,
```

for column filter work... what i have fail ?

wblakenc

You need to take a look at the Ajax that is sent to the server for filtering. On your server side you will need to loop over all the columns to determine which column you are searching and what the value is you are looking for.

Try using the developer tools in Chrome to inspect the package. It should help point you in the right direction.