How to Filter fewer columns

Greg_Hampton

This is based on the page and instructions at http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

I have successfully created a table using the code exactly as was provided. The problem I am having is that there is a dropdown for every column. I would like to have a dropdown filter for only a couple of the columns. For example using a table of addresses with the columns Name, address, City, State, Zip. I would like to have the dropdown filters only for the columns City, State and Zip. Is this possible and how would I implement it?

This may have been posted but I have not been able to find the answer, probably because I am not using the right syntax in my searches.

Greg_Hampton

Corrected link.

ThomD

I do this by setting a class on the columns that I want filter. Use the 'dt-filter' selector in the InitComplete function (and where ever you refresh the selectors).

Note that I changed my select boxes to allow mulitple values.

columns: [
   { data: "Manager", title:"Manager Name", className: "dt-filter" },
]

later on:

initComplete: function () {
    this.api().columns('.dt-filter').every( function () {
    var column = this;
    var select = $('<select  multiple="multiple" class="mSelect"><option value=""></option></select>')
        .appendTo( $(column.header()) )
        .on( 'change', function () {
            if ( $(this).val() == undefined) {
                val = "";
            } else {
                var val = $.fn.dataTable.util.escapeRegex(
                    $(this).val().join("zzz")
                );
                val = val.replace(/zzz/g,"|");
            }
            column
                .search( val ? '^' + val + '$'  : '' , true, false )
            .draw();
    } );
    column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="' +d+'">' +d+'</option>'  )
    } );
} );
}

Greg_Hampton

@ThomD Thank you for your response. It seems to me that someone who has customized the datatable would fully understand your response. I suppose I should have stated that I am not at all familiar with the datatable customization, nor am I a hard-core javascript programmer. As a result I lack the knowledge to fully appreciate your response.

Just as a wild guess that your change (columns: [ { data: ...) would be inserted on the line preceding initComplete.

Let me be more specific in my question. Here is the unmodified JS code from the example page in the link http://www.datatables.net/release-datatables/examples/api/multi_filter_select.html :

$(document).ready(function() {
    $('#example').DataTable( {
        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>' )
                } );
            } );
        }
    } );
} );

I have a table with the columns (Name, address, City, State, Zip).

With no modifications, this code works perfectly with my table. And it places a drop down filter at the bottom of every column (Name, address, City, State, Zip). Which is the very useful function I was looking for.

But I don't need to filter the name Bill Smith or the address 123 anywhere dr. What I would like to know is where I would make changes to put a drop down filter on only two columns ( City and State).

Or if someone could tell me what this method of customization is called i can do a proper search and find it myself.

And again, thank you for your response.

daniel_r

Just saying that you can also try my yadcf plugin for datatables , easy to setup. see showcase

ThomD

Greg, show us your code where you initialize your datatable. Compare my line 2 with your line 4.

this.api().columns('.dt-filter').every( function () {

 this.api().columns().every( function () {

that .dt-filter is a jQuery selector. It determines where the filters get added. All you need a the matching class name ("dt-filter" in my case) where you define your columns.

Greg_Hampton

Thanks for checking back. And, that helps a little bit more.

I use the unmodified code from the example page, as indicated above. And it works fine for whatever table.

I am using (currently) just regular table with th / tfoot with table id="example"

The above code is exactly all the code I have and it works great. (plus the header links to the js and css files.) Straight out of the box, so to speak.

I have grasped that I need to define the columns but I really don't know how. I'm guessing I need something like this to have the dropdown filters on just the City and State. If this is what I need, I still don't know where or how to put it.

columns: [
   { data: "Name", title:"Name" },
   { data: "Address", title:"Address" },
   { data: "City", title:"City", className: "dt-filter" },
   { data: "State", title:"State", className: "dt-filter" },
   { data: "Zip", title:"Zip" },
]

ThomD

You have the right idea. Add that between lines 2 and3 from the example and put a comma after the ] .

Greg_Hampton

@ThomD Thank you again for your help. I did get it working and your comments helped a great deal. Sorry for taking so long to respond but I had other things to worry about until this morning.