我有一个简单的表,并且在表内部我有一些数据可以测试DataTable。我将 bFilter 设置为false,以隐藏原始搜索DataTable并创建自己的数据表。
问题是,我自己的输入Text无法过滤表中的数据。引用this,我已经在Jquery中创建了这样的文件。
jQuery(document).ready(function ($) {
var table = $("#data-table").DataTable({
bSort: true,
bFilter: false,
iDisplayStart: 0,
iDisplayLength: 20,
sPaginationType: "full_numbers",
sDom: "Rfrtlip",
});
$("#searchFilter").keyup(function () {
table.search($(this).val()).draw();
});
});
<input type=\"text\" id=\"searchFilter\" name=\"searchFilter\" placeholder=\"Search...\" style=\"width:200px;\"/>
<table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" class=\"stdtable \" id=\"data-table\">
<thead>
<tr>
<th>NO</th>
<th>JUDUL</th>
<th>TANGGAL</th>
<th>RINGKASAN</th>
<th>STATUS</th>
<th>KONTROL</th>
</tr>
</thead>
<tbody>
<tr>
<td>zazaza</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
您的搜索无效,因为您设置了选项bFilter: false
。您可以找到有关bFilter here和search() here的更多信息。
我可以在这里为您展示一个工作示例:
$(document).ready(function() {
var table = $("#data-table").DataTable({
bSort: true,
// bFilter: false,
iDisplayStart: 0,
iDisplayLength: 20,
sPaginationType: "full_numbers",
sDom: "Rfrtlip",
});
$('#searchFilter').on('keyup', function() {
table.search(this.value).draw();
});
});
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<input type="text" id="searchFilter" name="searchFilter" placeholder="Search..." style="width:200px;" />
<table cellpadding="0" cellspacing="0" border="0" class="stdtable" id="data-table">
<thead>
<tr>
<th>NO</th>
<th>JUDUL</th>
<th>TANGGAL</th>
<th>RINGKASAN</th>
<th>STATUS</th>
<th>KONTROL</th>
</tr>
</thead>
<tbody>
<tr>
<td>zazaza</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
<td>asdsada</td>
</tr>
<tr>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
<td>remoremoreo</td>
</tr>
</tbody>
</table>