Datatable draw（）方法不適用於列過濾器

花了一些日子嘗試了很多我在互聯網上找到的解決方案後，我在這裏詢問了這個問題。Datatable draw（）方法不適用於列過濾器

我有一個窗體，當單擊搜索按鈕時，它將顯示一個包含數據的表。該表有8列，其中3個我想添加一個文本輸入，使用該輸入應用了列數據的過濾器。爲了更好地瞭解我的需求，有JsFiddle showing a working column filter。

所以，我嘗試了上述鏈接和Datatable exemple的解決方案沒有成功，無法找到我做錯了什麼。

有我的代碼：

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

通過aaData使用的result是一個JSON我上搜索休息方法的AJAX成功。我在該成功方法上填充表格。

所以我的問題是：我做了什麼錯誤或誤解？我試圖比較對象equipmentTable.column($(this).data('index')).search(this.value)與例子上返回的內容並獲取等效對象。這就是爲什麼我幾乎可以確定問題來自draw（）方法。

謝謝你的幫助。

來源

2016-08-30 dtlvd

這裏是工作fiddle

首先，你的搜索不工作，因爲你設置bFilter爲false。然後刪除此行或將此參數設置爲true：

bFilter: true,

但這還不夠。因爲列索引從0開始，所以用於繪製輸入文本列的循環將不起作用。然後，如果在第二列設置第一列，並在第一個輸入上搜索，則排序將在列0上完成。然後我在您的數據索引中添加了+1：

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

希望它有幫助。

來源

2016-08-30 10:13:03 John

謝謝你的回答。我嘗試過，並有同樣的問題。由myTable.column（colIdx）.search（this.value）返回的對象與我的代碼返回的內容完全相同，但draw（）似乎什麼都不做。 – dtlvd

你可以用你的代碼做一個jsfiddle嗎？ – John

在此之前，您可以嘗試將tr添加到事件代理密鑰中嗎？ 'tfoot tr th.textFilter input' – John

Datatable draw（）方法不適用於列過濾器

回答

相關問題