カラムフィルタでデータ描画可能なdraw（）メソッドが動作しない

Question

インターネットで見つけた多くのソリューションを試してみたのですが、私は です。

検索ボタンをクリックすると、データを含む表が表示されます。テーブルには8つの列があり、そのうち3つに列データを含むフィルターが適用されるテキスト入力を追加したいとします。私の必要性をよりよく理解するために、JsFiddle showing a working column filterがあります。

私は上記のリンクとDatatable exempleの解決策を試してみましたが、私が間違っていることを見つけることはできません。

私のコードがある：aaDataで使用

<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(); 
}); 

resultは、私は、検索レスト方法のAJAX成功を得るJSONです。私はその成功の方法のテーブルを作成します。

私の質問は次のとおりです。何が間違っているのか誤解していますか？ 私は、オブジェクトequipmentTable.column($(this).data('index')).search(this.value)を、例で返されたものと同等のオブジェクトを得るものと比較しようとしました。だから私は、問題がdraw（）メソッドから来ていることをほとんど確信しています。

ありがとうございました。ここで

Answer 1

が働いfiddle

まずあるあなたがfalseにbFilterを設定しているため、検索が機能していません。この行を削除するか、このパラメータをtrueに設定してください：

bFilter: true, 

ただし、これで十分ではありません。最初の列を2番目の列に設定し、最初の入力を検索すると、列は0に並べ替えられます。次に、入力テキストの描画に使用されるループは機能しません。あなたのデータインデックスに+1を追加しました：

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

希望すると助かります。