【发布时间】：2017-07-28 10:09:57
【问题描述】：
我遇到了 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" }
]
});
};
【问题讨论】：
-
显示您的代码，我们将检查并告知您您的问题。
-
所以我用所需的代码更新了我的问题
-
@AlivetoDie，我已经调用了该函数，但我没有在此处添加代码行。好好阅读我的问题，表格正确呈现并且数据ID正确显示，唯一的问题是过滤。这也和lang包路径无关，with也是正确的。
标签： jquery datatables