我正面临着jQuery数据表的问题 . 我有一个包含3个数据表的页面，所有数据表都通过ajax调用获取数据并且核心地显示数据 . 排序和分页也很完美 . 只有过滤不好 . 一旦我在第一个表的搜索字段中输入值，我得到的是最后一个表被过滤而不是第一个表 .
我也试过这个：https://datatables.net/examples/basic_init/multiple_tables.html但它没有帮助
我的网站是mvc 5 c＃ . 我在这里已经阅读了很多类似的问题，但我找不到任何适合我的答案 . 这是我的代码：
<div class="col-md-12">
<div class="card">
<h3 class="card-title">Table 1</h3>
<div class="card-body">
<table class="table table-hover table-bordered" id="tableLow1">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col23</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
<div class="col-md-12">
<div class="card">
<h3 class="card-title">Table 2</h3>
<div class="card-body">
<table class="table table-hover table-bordered" id="tableLow2">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col23</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
这是我的jquery代码：
function SetupTable1() {
var tableLow1 = $('#tableLow1').DataTable({
destroy: true,
"language": {
"url": "../Scripts/localization/datatables.de.json",
searchPlaceholder: "ID# Eingeben..."
},
"initComplete": function (settings, json) {
// filter only after RETURN or filter is deleted
$(".dataTables_filter input")
.unbind()
.bind('keyup change', function (e) {
if (e.keyCode == 13 || this.value == "") {
tableLow1
.search(this.value)
.draw();
}
});
},
"autoWidth": false,
"autoHeight": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "/Home/GetDataTable1",
"type": "POST"
},
scrollX: true,
scrollY: true,
scrollCollapse: true,
"fixedColumns": {
leftColumns: 1
},
"order": [[1, "desc"]],
"columnDefs": [
{
"targets": 0,
"data": null,
render: function (data, type, row) {
return "<span class='smart_modal btn btn-primary'> Accept </span>"
}
},
{
"targets": [0],
"orderable": false
},
{
"targets": [1],
"orderable": true
},
{
"targets": [2],
"orderable": false
},
{
"targets": [3],
"orderable": false
}
],
"columns": [
{ "data": null },
{ "data": "value1" },
{ "data": "value2" },
{ "data": "value3" }
]
});
};
function SetupTable2() {
var tableLow2 = $('#tableLow2').DataTable({
destroy: true,
"language": {
"url": "../Scripts/localization/datatables.de.json",
searchPlaceholder: "ID# Eingeben..."
},
"initComplete": function (settings, json) {
// filter only after RETURN or filter is deleted
$(".dataTables_filter input")
.unbind()
.bind('keyup change', function (e) {
if (e.keyCode == 13 || this.value == "") {
tableLow2
.search(this.value)
.draw();
}
});
},
"autoWidth": false,
"autoHeight": true,
"processing": true,
"serverSide": true,
"ajax": {
"url": "/Home/GetDataTable2",
"type": "POST"
},
scrollX: true,
scrollY: true,
scrollCollapse: true,
"fixedColumns": {
leftColumns: 1
},
"order": [[1, "desc"]],
"columnDefs": [
{
"targets": 0,
"data": null,
render: function (data, type, row) {
return "<span class='smart_modal btn btn-primary'> Accept </span>"
}
},
{
"targets": [0],
"orderable": false
},
{
"targets": [1],
"orderable": true
},
{
"targets": [2],
"orderable": false
},
{
"targets": [3],
"orderable": false
}
],
"columns": [
{ "data": null },
{ "data": "value1" },
{ "data": "value2" },
{ "data": "value3" }
]
});
};
1 回答
我认为$（“ . dataTables_filter input”）会找到每两个滤波器输入 . 您必须单独使用它们 .
为1.table
$("#tableLow1_filter"))和2.table
$("#tableLow2_filter")要么
为1.table
$(".dataTables_filter input", $('#tableLow1_wrapper'))和2.table
$(".dataTables_filter input", $('#tableLow2_wrapper'))结果是：