Datatable draw() method not working on column filter

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.

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.