server-side-with-individual-column-searching-on-specific-columns-only

beginneer

Hi Guys, I am trying to implement server side individual column filtering using this example with little modification

https://datatables.net/forums/discussion/31765/server-side-with-individual-column-searching-text-inputs

Modifications:
1. Add footer above the headers
2. Add column filters only for specific columns
3. Trigger event on Enter keyCode

$('#myDataTable tfoot th').filter(':eq(2),:eq(4),:eq(6),:eq(8),:eq(10)').each( function () {
            var title = $('#myDataTable thead th').eq( $(this).index() ).text();
            $(this).html( '<input type="text" placeholder="Search '+title+'" id ="filter'+$(this).index()+'"/>' );
        } );
        $('#myDataTable tfoot tr').insertBefore($('#myDataTable thead tr'))
        
        var table = $('#myDataTable').Datatable({
        .... 
        })
        
        table.columns(2,4,6,8,10).every( function () {
            var that = this;
            $( 'input', this.footer() ).on( 'keyup change', function (e) {
                 if ( that.search() != this.value && e.keyCode == 13) {
                     that.search( this.value ).draw();
                 }
            } );
        } );

In MVCController, I am capturing these pagination/search filters like below

@RequestParam(value = "draw", required = false) Integer draw,
@RequestParam(value = "order[0][column]", required = false) final Integer sortColumn,
@RequestParam(value = "order[0][dir]", required = false) final String sortOrder,
@RequestParam(value = "start", required = false) Integer start,
@RequestParam(value = "length", required = false) Integer length,
@RequestParam(value = "columns[2][search][value]", required = false) String col2search,
@RequestParam(value = "columns[4][search][value]", required = false) String col4search,
@RequestParam(value = "columns[6][search][value]", required = false) String col6search,
@RequestParam(value = "columns[8][search][value]", required = false) String col8search,
@RequestParam(value = "columns[10][search][value]", required = false) String col10search

Problem here is I am only getting the value in col2search which is obvious because I am triggering event on one column at a time. Currently I am getting just one filter from which enter event is triggered.
How do I search all filters added by just one request to server. e.g add search text to all these specific search placeholders and get matching result.

I have explored most examples/answers in forum but couldn't get it working. Can some one help please

bindrid

You cant catch unprintable key strokes like enter or tab with a keypress or keyup, got to use keydown

beginneer

Ah no, I press enter when I want to trigger event. Thats not the problem. Problem is how to send multiple search filter data to server.

beginneer

I figured it out. Here is the code

var filterColumns = [2, 6, 8, 10];
        table.columns(filterColumns).every(function () {
            var that = this;
            $('input', this.footer()).on('keypress', function (e) {
                if (that.search() != this.value && e.keyCode == 13) {
                    filterColumns.map(function (key, value) {
                        table = table.column(key).search($("#filter" + key).val());
                    })
                    table.draw();
                }
            });
        });

bindrid

I got that wrong, hope I did not cause you any extra grief

mozikun

Hi beginner, did you solved it already?