How can I exclude certain colunmns from search when using Individual column searching?

alexandervj

I'm trying to use Individual Column Searching seen here...
https://datatables.net/examples/api/multi_filter.html

but want to exclude the first few columns as those are just selectors and icons. How can I do this? Thanks

allan

Modify the selector:

table.columns().eq( 0 ).each( function ( colIdx ) {

That selects all columns from the first table. See columns() for information on the column selector syntax. For example you could use table.columns( ':gt(2)' )

Allan

alexandervj

I'm still having trouble with this. Can you go into a little further detail? Thanks

allan

In the example it has:

table.columns().every( function () {

You would have:

table.columns( ':gt(2)' ).every( function () {

Note I've updated the example in the 1.10.6 release to use the new columns().every() method as it is nicer :-)

If you still have problems, please link to the page you are working on.

Allan

alexandervj

Thanks Allan,
I'm not sure what I'm doing wrong. I changed the code as you said above. Here is the page I'm working on

http://apps.trilumina-temp.com/apps/database/lots

allan

I see - you have:

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

Which is putting an input box in every column. Use:

        $('#example tfoot th:gt(2)').each( function () {

The other code was limiting the event handler to just the other columns. You need both - apologies for missing that from my original post.

Allan

alexandervj

Thanks very much Allan, that worked!

alexandervj

Ran into one more problem - it doesn't seem to be applying the filter in the individual columns now. Thanks for all your help on this!

allan

Have a look at the console in your browser. There is a JS error when you search.

The problem appears to be that you have:

 $('#example tfoot th:gt(2)').each( function () {

for the loop to add the listeners, rather than the code suggested above:

table.columns( ':gt(3)' ).every( function () {

Allan

alexandervj

Im not really sure what you mean, so my code looks like this

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th:gt(4)').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input style="width:90px;" type="text" placeholder="Search '+title+'" />' );
    } );

    // DataTable
    var table = $('#example').DataTable();

    // Apply the search
    table.columns( ':gt(4)' ).every( function () {
        var that = this;

        $( 'input', this.footer() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
} );

and when I change the every() to an each() function, so that theyre both each() then it looks like it tries to apply the search but doesnt see any of the applied parameters - as if there is no data in the table to show no matter what you search for. And if I change both each() functions to every() functions then it doesnt apply search to individual columns at all. Thanks Allan

allan

and when I change the every() to an each() function, so that theyre both each()

Why would you want to do that? You want to use columns().every() in the second loop.

Looking at it - you need to update to DataTables 1.10.6. Or just go back to the old style - here is the old example code:

https://github.com/DataTables/DataTables/blob/1.10.5/examples/api/multi_filter.html

Allan

allan

I don't normally just write the code, but:

$(document).ready(function() {
    // Setup - add a text input to each footer cell
    $('#example tfoot th:gt(4)').each( function () {
        var title = $('#example thead th').eq( $(this).index() ).text();
        $(this).html( '<input style="width:90px;" type="text" placeholder="Search '+title+'" />' );
    } );
 
    // DataTable
    var table = $('#example').DataTable();
 
    // Apply the search
    table.columns( ':gt(4)' ).eq( 0 ).each( function ( colIdx ) {
        var that = this;
 
        $( 'input', this.footer() ).on( 'keyup change', function () {
            that
                .search( this.value )
                .draw();
        } );
    } );
} );

That will work for your current DataTables version.

alexandervj

Thanks Allan, I updated to DataTables 1.10.6 and it works now. Sorry for the noob questions

alexandervj

one last quick question - if I wanted to exclude the second to last column from the search filter also, what would the notation be for that? ie. how would I change :gt(4) if I wanted to exclude the first 4 columns, and the 11th column? Thanks!

allan

You can use jQuery selectors to create complex expressions like that, but to be honest I would say you would be best just adding a class to the columns you want ot be searchable and updating your selectors to match on that class.