Multi Filtering by column on serverside table

regisbs

hey guys i've made a datatable using serverside with ajax however I'm not able to user column filtering i just doesn't work.

this is my code

var dataTableChamado = $('#arquivos3').DataTable({
        "order": [[ 3, "desc" ]],
        "processing": false,
        "lengthChange": true,
        "lengthMenu": [[10, 25, 50, 10000000], [10, 25, 50, "Todos"]],
        "dom": 'lBfrtip',
        "buttons": [
            {extend: 'excel', title: 'Logic - Todos Chamados'},
            {extend: 'pdf', title: 'Logic - Todos Chamados'}
        ],
        "columnDefs": [ {
            "targets": 1,
            "render": function ( data, type, row ) {
              return '<a href="chamado.php?id='+row[0]+'">'+data+'</a>';
            }
          },
          { className: "my_class", "targets": [ 0 ] },
          {
            "targets": 0,
            "render": function ( data, type, row ) {
              return '<a href="chamado.php?id='+row[0]+'">'+data+'</a>';
            }
          },
          {
            "targets": 8,
            "render": function ( data, type, row ) {
                if(data==1){
                    return '<span>Aberto</span>';
                }
                if(data==2){
                    return '<span>Fechado</span>';
                }
            }
          }],
        "serverSide": true,
        "ajax": {
            url: "includes/tabelaChamado.php", // json datasource
            type: "post", // method  , by default get
        },
        "initComplete": function() {
            var $buttons = $('.dt-buttons').hide();
            $("#pdf").on("click", function() {
                $('.buttons-pdf').click();
            });
            $("#excel").on("click", function() {
                $('.buttons-excel').click();
            });
            
            this.api().columns().every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                    .appendTo( $(column.footer()).empty() )
                    .on( 'change', function () {
                        var val = $.fn.dataTable.util.escapeRegex(
                            $(this).val()
                        );
  
                        column
                            .search( val ? '^'+val+'$' : '', true, false )
                            .draw();
                    } );
  
                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );
            
       }
    });

on initComplete I call all the footer selects to filter and the draw function but it still not working.

hope you guys can help me.

colin

Can you link to a page showing the issue, please?

Colin