jQuery - DataTables - ColumnFilter Doesn't Work

Question

I'm using DataTables (successfully) and am trying to incorporate ColumnFilter. My JS looks as follows:

$(document).ready(function () {
    oTable = $('#ecTable').dataTable({
        "sScrollY": "550px",
        "sScrollX": "100%",
        "bPaginate": false,
        "bScrollCollapse": true,
        "bInfo": true,
        "bFilter": false,
        "bProcessing": true,
        "aaSorting": [[0, 'desc']]
    })

    .columnFilter({
        aoColumns: [
            null,
            null,
            { type: "select" },
            { type: "select" },
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null,
            null]
    });
});

My table header and footer looks like this:

<thead>
    <tr>
        <th>Listing Date</th>
        <th>Expiration Date</th>
        <th>Manufacturer</th>
        <th>Model</th>
        <th>Body Style</th>
        <th>Engine</th>
        <th>Year</th>
        <th>Mileage</th>
        <th>Ext. Color</th>
        <th>Int. Color</th>
        <th>Listing Price</th>
        <th>Comments</th>
        <th>Number Of Views</th>
        <th class="noSort">Navigation</th>
    </tr>
</thead>

   <tfoot>
        <tr>
            <th>Listing Date</th>
            <th>Expiration Date</th>
            <th>Manufacturer</th>
            <th>Model</th>
            <th>Body Style</th>
            <th>Engine</th>
            <th>Year</th>
            <th>Mileage</th>
            <th>Ext. Color</th>
            <th>Int. Color</th>
            <th>Listing Price</th>
            <th>Comments</th>
            <th>Number Of Views</th>
            <th></th>
        </tr>
    </tfoot>

I'm not getting any errors in Chrome. The resulting data table looks exactly as it should, except it has no filter columns. Looking at the generated source, the JS for column filter is getting downloaded. Can anyone help?

I'm no datatables expert, but could this line have something to do with it? "bFilter": false, — Jules Colle
– Jules Colle, Commented Apr 11, 2013 at 17:58
@Jules - That was exactly the problem! I had this turned off because I didn't want to use the default DataTables searching. If you create this as an answer, I'll vote it up and accept it. — Randy Minder
– Randy Minder, Commented Apr 11, 2013 at 18:01
thanks :) it can be hard sometimes to spot the obvious in your own code. — Jules Colle
– Jules Colle, Commented Apr 11, 2013 at 18:03
@Jules - I guess it would help if the documentation were better. — Randy Minder
– Randy Minder, Commented Apr 11, 2013 at 18:06
@RandyMinder, if you need only slect filters you can also try out this filter plugin github.com/vedmack/yadcf :) — Daniel
– Daniel, Commented Apr 11, 2013 at 19:23

Jules Colle · Accepted Answer · 2013-04-11 18:02:53Z

3

Comment promoted to answer:

I'm no datatables expert, but could this line have something to do with it? "bFilter": false,

answered Apr 11, 2013 at 18:02

Jules Colle

12k9 gold badges67 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

jQuery - DataTables - ColumnFilter Doesn't Work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related