我遇到了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" }
]
});
};
答案 0 :(得分：2)
我认为$（＆＃34; .dataTables_filter输入＆＃34;）会找到每两个过滤器输入。你必须单独使用它们。
表示1.table $("#tableLow1_filter"))
和2.table $("#tableLow2_filter")
或
表示1.table $(".dataTables_filter input", $('#tableLow1_wrapper'))
和2.table $(".dataTables_filter input", $('#tableLow2_wrapper'))
结果：
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", $('#tableLow1_wrapper'))
.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", $('#tableLow2_wrapper'))
.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 :(得分：0)
我来自同一问题的日子。我建议根据事件“激活”网格1或2，例如显示/隐藏模态选项卡，然后尝试重新加载数据表。 例如，我在同一页面中显示了两个网格，但是显示了twop选项卡。 我激活标签后，刷新数据表
$('#grid').DataTable().ajax.reload();
通过这种方式，过滤器和其他ajax源事件将在最后加载的网格上触发。