How to limit Individual column searching?

katy6514

Hi all,

Here's the table I'm working on: http://cxc.harvard.edu/target_lists/large_projects/BPs.html and I'd like to only let users sort by the 3rd or 5th column since sorting by the other columns isn't very meaningful.

I found this post: https://www.datatables.net/forums/discussion/21425/is-it-possible-to-limit-individual-column-filtering-select-inputs-to-specific-columns#Comment_61847 which seems like exactly what I want to do, but I'm still new to javascript and I'm having trouble translating the code in the answer to what I'm working with.

Here's the relevant snippet from my code (taken straight from the example here: https://www.datatables.net/examples/api/multi_filter_select.html):

'''

    initComplete: function () {
        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>' )
                } );
        } );
    }

'''

Any and all help appreciated.

katy6514

I've been taking an online JS course so I managed to figure it out, thanks anyways! And thanks for making such a great product!

williamsdb

Hi

Great that you worked it out - can you post what you did here so others can see?

Thanks

demoniodojo

HI! Could you please show how you fixed it? I´m having the same problem, I just want one column to be filtered with a select.
Thanks!

katy6514

I can't quite remember which particular thing fixed my problem, it's been a while but here's the solution that I cobbled together from another example I can't find right now, I do remember there was more than a few things that I had to fix.

Here's what code works for me:

initComplete: function () {                                                                                             
        $("#example thead th").each( function ( i ) {
                if((i==0) || (i==3) || (i==5) || (i==6)) {
                        console.log(i+"th column ignored");
                } else if (i==1) {
                        console.log(i+"th column ignored");
                } else {
                        var select = $('<select><option value=""></option></select>')
                        .appendTo( $(this) )
                        .on( 'change', function () {
                                table.column( i )
                                        .search( $(this).val() )
                                        .draw();
                        } );

                        table.column( i ).data().unique().sort().each( function ( d, j ) {
                                select.append( '<option value="'+d+'">'+d+'</option>' )
                        } );
                }
        } );
}

I see that the column selector if/else can be simplified, I think that's leftover from some debugging.

Sorry about the late reply williamsDB, and I hope it can help demoniodojo!