JQuery: Datatables - Column Filtering Plugin

1
votes

I'm attempting you the plugin found here (http://jquery-datatables-column-filter.googlecode.com/svn/trunk/default.html) on my datatables that are populated via AJAX, but when following the instructions in the example for adding the required footer to the table: 

<tfoot>
        <tr>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </tfoot>

I wind up simply with a footer row w/labels and not the text boxes as shown in the example.

Any thoughts on what I need to do to correct this? Thanks!

2
jqueryjquery-pluginsfiltering
Do you add a th for each column ? Does the footer match the header ? In the example source there is a theader in the beginning of the table, with the exact columns as the footer. Perhaps that is a requirement. - Niloct
Yes, I have a matching header, but still no luck. - user464180
Could you create a jsfiddle.net with your view source ? - Niloct

2 Answers

0
votes

Did you add this to you .datatable javascript?

$(document).ready( function () {
        $('#example').dataTable()**.columnFilter()**;
}
0
votes

Thanks for the assistance. I wound up trying a few different locations for the location of the $('#example').dataTable().columnFilter(); call, and since I'm using AJAX, I needed to have it positioned during the rendering of my table.

Something such as:

if( typeof dataTable == 'undefined' )
dataTable = $('#eventRecords').dataTable({"bJQueryUI": true}).columnFilter();