Datatable draw()方法不适用于列过滤器
Datatable draw() method not working on column filter
在花了几天时间尝试了我在 Internet 上找到的许多解决方案之后,我
在这里问。
单击搜索按钮时,我有一个显示包含数据的 table 的表单。 table 有 8 列,我想在其中的 3 列上添加一个文本输入,应用带有列数据的过滤器。为了更好地了解我的需求,请参阅 JsFiddle showing a working column filter.
所以,我尝试了上面 link 和 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我在搜索Rest方法上ajax成功了。我在该成功方法上填充 table。
所以我的问题是:我做错了什么或误解了什么?
我试图将对象 equipmentTable.column($(this).data('index')).search(this.value)
与示例返回的内容进行比较并获得等效对象。这就是为什么我几乎可以肯定问题出在 draw() 方法上。
感谢您的帮助。
这是工作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();
});
希望对您有所帮助。
在花了几天时间尝试了我在 Internet 上找到的许多解决方案之后,我 在这里问。
单击搜索按钮时,我有一个显示包含数据的 table 的表单。 table 有 8 列,我想在其中的 3 列上添加一个文本输入,应用带有列数据的过滤器。为了更好地了解我的需求,请参阅 JsFiddle showing a working column filter.
所以,我尝试了上面 link 和 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我在搜索Rest方法上ajax成功了。我在该成功方法上填充 table。
所以我的问题是:我做错了什么或误解了什么?
我试图将对象 equipmentTable.column($(this).data('index')).search(this.value)
与示例返回的内容进行比较并获得等效对象。这就是为什么我几乎可以肯定问题出在 draw() 方法上。
感谢您的帮助。
这是工作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();
});
希望对您有所帮助。