Datatable draw() method not working on column filter

Question

After spending some days trying many solutions I've found on the Internet I'm asking here.

I have form which display a table containing datas when search button is clicked. The table has 8 columns and on 3 of them I want to add a text input with which a filter with the column datas is applied. For a better understanding of my need there is the JsFiddle showing a working column filter.

So, I tried the solution of the link above and of the Datatable exemple without success and can't find what I'm doing wrong.

There is my code :

<table id="EquipmentTable" class="table table-striped table-bordered bottom-buffer" width="100%">
    <thead>
        <tr>
            <th><input type="checkbox" name="select_all" value="1" id="checkAll" class="text-center" onclick="$.fn.backboneSearch.checkAllResult()"></th>
            <th>Equipement</th>
            <th>Famille d'équipement</th>
            <th>Gamme d'équipement</th>
            <th>Etat</th>
            <th>UI</th>
            <th>Site de stockage</th>
            <th>Salle technique</th>
            <th></th>
        </tr>
    </thead>
    <tfoot id="backboneSearchtfoot">
        <tr id="filterrow">
            <th></th>
            <th id="textFilter1" class="textFilter"></th>
            <th id="textFilter2" class="textFilter"></th>
            <th id="textFilter3" class="textFilter"></th>
            <th class="listFilter"></th>
            <th></th>
            <th></th>
            <th></th>
            <th></th>
        </tr>
    </tfoot>
</table>

// Setup - add a text input to each footer cell
$('#EquipmentTable tfoot th.textFilter').each(function (i) {
    $(this).html('<input type="text" data-index="' + i + '" />');
});

equipmentTable = $('#EquipmentTable').DataTable({
    aaData: result,
    aoColumns: [
        { mData: 'Identifier' },
        { mData: 'Mnemo' },
        { mData: 'FamGam.Family' },
        { mData: 'FamGam.Gamme' },
        { mData: 'dataState.Libelle' },
        { mData: 'IdentifierUI' },
        { mData: 'TechnicalRoom.InterventionUnitySenderSite' },
        { mData: 'IdentifierTechnicalRoom' },
    ],
    bDestroy: true,
    bFilter: false,
    bRetrieve: true,
    buttons: [{
        className: 'btn-warning',
        columns: [1, 2, 3, 4, 5, 6],
        extend: 'excel',
        fieldSeparator: ';',
        text: '<span class="glyphicon glyphicon-export"></span> Export'
    }],
    dom: 'Bfrtip',
    language: { /*not useful to show*/ },
    stateSave: true,
    bProcessing: true
});

$(equipmentTable.table().container()).on('keyup', 'tfoot th.textFilter input', function () {
    equipmentTable.column($(this).data('index'))
                  .search(this.value)
                  .draw();
});

The result used by aaData is a json I get on the ajax success of the search Rest method. I populate the table on that success method.

So my question is : what have I done wrong or misunderstood ? I've tried to compare the object equipmentTable.column($(this).data('index')).search(this.value) with what is returned on the exemple and getting equivalent object. That's why I'm almost sure that the problem is coming from the draw() method.

Thank you for your help.

John · Accepted Answer · 2016-08-30T15:45:54.327

8

Here is the working fiddle

First, your search is not working because you set bFilter to false. Then just remove this line or set this param to true :

bFilter: true,

But is not enough. Your loop used to draw input text column will not working because the column index begin at 0. Then if you set the first column at the second column, and you search on your first input, the sort will be done on the column 0. Then I added +1 to your data-index :

$(equipmentTable.table().container()).on('keyup', 'tfoot tr th.textFilter input', function () {
    equipmentTable.column($(this).data('index') + 1)
                  .search(this.value)
                  .draw();
});

Hope it helps.

edited Aug 30 '16 at 15:45

answered Aug 30 '16 at 10:13

John

4,711
9
51
101

Thank you, for your answer. I tried it and having the same problem. The object returning by myTable.column( colIdx ).search( this.value ) is exactly the same as my what my code return but the draw() seems to do nothing. – dtlvd Aug 30 '16 at 12:04
Before that can you try to add the tr inside your event delegation keyup ? `tfoot tr th.textFilter input` – John Aug 30 '16 at 14:31
I tried also with the tr, without success. I made a JSFiddle : https://jsfiddle.net/6vcd4ct5/ – dtlvd Aug 30 '16 at 15:08
Ok I got this, I'll update my answer and give you the new fiddle – John Aug 30 '16 at 15:18
Wow! Thank you so much, it's working! I wasn't expecting that bFilter will be the problem. – dtlvd Aug 30 '16 at 15:43

Datatable draw() method not working on column filter

1 Answers1