Question

I try to use the columnFilter add-on of jquery datatable but I couldn’t make it run.
I have added the plugin correctly because it didn’t raise any error but it didn’t create the filter/search fields on the table either.

Datatable rows are created by server-side and first column contains checkbox. You can find my html and jquery below.

What could be the problem ?

<table id="orderList">
                <thead>
                    <tr>
                        <th><input type=checkbox name='allSelect' class="allSelect"></th>
                        <th> h1 </th>
                        <th> h2 </th>
                        <th> h3 </th>
                        <th> h4 </th>
                        <th> h5 </th>
                    </tr>
                </thead>
            </table>

var oTable = $('#orderList').dataTable(
                {
                    "sScrollY": "350px",
                    "sScrollX": "100%",
                    "bJQueryUI": true,
                    "sPaginationType": "full_numbers",
                    "bProcessing": true,
                    "bServerSide": true,
                    "sAjaxSource": "/project/order_search_ajax/",
                    "aoColumnDefs": [
                      { 'bSortable': false, 'aTargets': [ 0 ] }
                   ]
                }
        ).columnFilter();

Answer 1

Ops. I had to add footer as explained in the documentation

<table id="orderList">
                <thead>
                    <tr>
                        <th><input type=checkbox name='allSelect' class="allSelect"></th>
                        <th> h1 </th>
                        <th> h2 </th>
                        <th> h3 </th>
                        <th> h4 </th>
                        <th> h5 </th>
                    </tr>
                </thead>
<tfoot>
        <tr>
            <th>Rendering engine</th>
            <th>Rendering engine</th>
            <th>Browser</th>
            <th>Platform(s)</th>
            <th>Engine version</th>
            <th>CSS grade</th>
        </tr>
    </tfoot>
            </table>