如何在asp.net核心的数据表中搜索动态列

Question

根据示例https://www.datatables.net/release-datatables/examples/api/regex.html我想按列对表进行过滤，全局搜索工作正常，但搜索列显示了一个错误。

Uncaught TypeError: $(...).DataTable(...).column(...).search(...).draw is not a function
at filterColumn (Index:667)
at HTMLInputElement.<anonymous> (Index:637)
at HTMLInputElement.dispatch (jquery.min.js:2)
at HTMLInputElement.v.handle (jquery.min.js:2)

这是我的代码

@section Styles {
<!-- DataTables -->
<link rel="stylesheet" href="~/libs/datatables/css/dataTables.bootstrap.min.css">
<link href="~/css/listedviews.css" rel="stylesheet" />
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
@section Scripts {
<!-- DataTables -->
<script src="~/libs/datatables/js/jquery.dataTables.min.js"></script>
<script src="~/libs/datatables/js/dataTable110.21.js"></script>
}
<script>
$(document).ready(function () {
$('#dailyload').DataTable({
pageLength: 10,
ajax: {
url: '/MonthlyInterest/MonthlyDetails',
dataSrc: ''
},
columns: [
{title: 'Account No', data: 'loanAccountNo'},
{title: 'Amount Written off',data: 'amountWrittenOff'}
]
});
$('input.global_filter').on('keyup click', function () {
filterGlobal();
});
$('input.column_filter').on('keyup click', function () {
filterColumn($(this).parents('tr').attr('data-column'));
});
});
function filterGlobal() {
$('#dailyload').DataTable().search(
$('#global_filter').val(),
).draw();
}
function filterColumn(i) {
$('#dailyload').DataTable().column(i).search(
$('#col' + i + '_filter').val()
).draw();
}
</script>
<div class="container">
<div class="row">
<div class="box">
<div class="box-header">
</div>
<div class="box-body" style="padding-right: 80px">
<div style="background-color:#f5f5f5; padding:20px">
<h2>Search Panel</h2>
<table>
<tbody>
<tr>
<td>Employee Name</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
</tr>
</tbody>
</table>
</div>
<table id="dailyload" class="table table-striped">
</table>
</div>
</div>
</div>
</div>

Answer 1

实际上你已经很接近了。

您忘记在自己的行中包含第二个筛选器，并在其tr标记中包含data-column属性。这是您的原始代码：

<tr>
<td>Employee Name</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
</tr>

这就是你应该做的：

<tr>
<td>Employee Name</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
</tr>
<tr data-column="0">
<td>Another Filter</td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
</tr>

看看我的例子：

var jsonData = [
{ 
"loanAccountNo": "500507082020",
"amountWrittenOff": "$320,800"
},
{ 
"loanAccountNo": "308205105020",
"amountWrittenOff": "$170,750"
},
{ 
"loanAccountNo": "120205205070",
"amountWrittenOff": "$186,800"
}
];
$(document).ready(function () {
$('#dailyload').DataTable({
pageLength: 10,
/*ajax: {
url: '/MonthlyInterest/MonthlyDetails',
dataSrc: ''
},*/
data: jsonData,
columns: [
{title: 'Account No', data: 'loanAccountNo'},
{title: 'Amount Written off',data: 'amountWrittenOff'}
]
});
$('input.global_filter').on('keyup click', function () {
filterGlobal();
});
$('input.column_filter').on('keyup click', function () {
filterColumn($(this).parents('tr').attr('data-column'));
});
});
function filterGlobal() {
$('#dailyload').DataTable().search(
$('#global_filter').val(),
).draw();
}
function filterColumn(i) {
$('#dailyload').DataTable().column(i).search(
$('#col' + i + '_filter').val()
).draw();
}
/*function filterColumn2(i) {
$('#dailyload').DataTable().columns(i).search(
$('#col' + i + '_filter').val()
).draw();
}*/

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<div class="container">
<div class="row">
<div class="box">
<div class="box-header">
</div>
<div class="box-body" style="padding-right: 80px">
<div style="background-color:#f5f5f5; padding:20px">
<h2>Search Panel</h2>
<table>
<tbody>
<tr>
<td>Employee Name</td>
<td align="center"><input type="text" class="global_filter" id="global_filter"></td>
</tr>
<tr data-column="0">
<td>Another Filter</td>
<td align="center"><input type="text" class="column_filter" id="col0_filter"></td>
</tr>
</tbody>
</table>
</div>
<br>
<table id="dailyload" class="table table-striped">
</table>
</div>
</div>
</div>
</div>

顺便说一句，在我的第一次尝试中，我遇到了同样的问题(同样的错误消息(，我更改了这一行：

$('#dailyload').DataTable().column(i).search(

为此：

$('#dailyload').DataTable().columns(i).search(

最终，它如预期的那样发挥了作用。请注意列中额外的s。

但后来我再次尝试删除s(带有列(，突然间，令我惊讶的是，它开始工作了。也许是奇怪的故障？