1 回答

TA貢獻1853條經驗 獲得超9個贊
其實你很接近。
您忘記將第二個過濾器包含在其自己的行中,并在其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(
最后它按預期工作。注意columns中的額外s。
但后來我再次嘗試刪除s(帶有column),突然間,令我驚訝的是,它正在工作。奇怪的故障,也許?
添加回答
舉報