Multi Filter not Working with Server Side

elimariaaa

Hello,

I'd like to add the multi filter feature like stated here - https://datatables.net/examples/api/multi_filter.html. It's working as is but I can't make it work with server side data.

Here's the link where I want the multi filter to appear: http://oss-dev.forexworld.us/datatables-test/

And this is my code to show my datatable:

<script type="text/javascript">
// Setup - add a text input to each footer cell
jQuery(document).ready(function($) {
    $('#cq-datatables-<?php echo $datatable_id; ?> tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    var table = $('#cq-datatables-<?php echo $datatable_id; ?>').DataTable( 
    {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "<?php echo plugins_url(); ?>/cq-datatables/datatables/scripts/post.php",
            "type": "POST",
            "data": { table_name: "<?php echo $retrieve_table_name; ?>"}
        },
        "columns": [<?php echo $test; ?>],
        "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip',
        "buttons": [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print',
            'colvis'
        ]
    } 
    );
    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>
    <table id="cq-datatables-<?php echo $datatable_id; ?>" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>id</th>
                <th>first_name</th>
                <th>last_name</th>
                <th>position</th>
                <th>email</th>
                <th>office</th>
                <th>start_date</th>
                <th>age</th>
                <th>salary</th>
                <th>seq</th>
                <th>extn</th>
            </tr>
        </thead>
    </table>

bindrid

That is because you are stomping on what is sent to the server.

Change this line

      "data": { table_name: "<?php echo $retrieve_table_name; ?>"}

to

      "data": function(dtParms){ dtParms.table_name = "<?php echo $retrieve_table_name; ?>";
            return dtParms;
    },

bindrid

oops sorry about the double post

elimariaaa

Hi Bindrid,

Thanks for your answer. I tried your code but nothing changed.
Please see here - http://oss-dev.forexworld.us/datatables-test/

jQuery(document).ready(function($) {
    $('#cq-datatables-6 tfoot th').each( function () {
        var title = $(this).text();
        $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
    } );
    var table = $('#cq-datatables-6').DataTable( 
    {
        "processing": true,
        "serverSide": true,
        "ajax": {
            "url": "http://oss-dev.forexworld.us/wp-content/plugins/cq-datatables/datatables/scripts/post.php",
            "type": "POST",
            "data": function(dtParms){ 
                        dtParms.table_name = "sample_large_table";
                        return dtParms;
                    }
        },
        "columns": [{"data": "id"}, {"data": "name"}, {"data": "company"}, {"data": "order_date"}, {"data": "product"}, {"data": "amount"}, {"data": "total"}],
        "columnDefs": [
            {
                "targets": [ 0 ],
                "visible": false
            }
        ],
        "dom": '<"row"<"col-md-12"<"pull-right"B>l>><"custom-spacer"f>rtip',
        "buttons": [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5',
            'print',
            'colvis'
        ]
    } 
    );
    // Apply the search
    table.columns().every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            if ( that.search() !== this.value ) {
                that
                    .search( this.value )
                    .draw();
            }
        } );
    } );
} );
</script>

elimariaaa

My life saver!