我正在使用bootstrap4 dataTables从服务器填充数据。我已成功填充表中的数据。但是,当我在搜索表中键入value时,表变为空。我不知道为什么会这样,这是我的代码...
在加载时,我使用了波纹管代码
<script type="text/javascript">
$(document).ready(function() {
$('#tb_product_details').DataTable();
getData();
});
</script>
我已经使用以下代码从服务器填充了数据
function getData() {
$.ajax({
type : "POST",
url : "productDetails/getProductList",
success : function(data) {
var trHTML = '';
for (var i = 0; i < data.length; i++) {
var item = data[i];
trHTML += '<tr>';
trHTML += '<td>'+ item.slno + '</td>';
trHTML += '<td>'+ item.productid + '</td>';
trHTML += '<td>'+ item.name + '</td>';
trHTML += '</tr>';
}
$('#tb_product_details tbody').append(trHTML);
}
})
}
我用过以下html表代码。
<table class="table table-bordered" id="tb_product_details" width="100%" cellspacing="0">
<thead>
<tr>
<th>SL</th>
<th>Product ID</th>
<th>Product Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
这是数据表js
<link href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<script src=" https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
以下是显示当前情况的jsfiddle:https://jsfiddle.net/035adhcx/
请帮助我找出为什么搜索不起作用。...
答案 0 :(得分:2)
当表中实际上没有设置tbody
时,您要在$('#tb_product_details tbody').append(trHTML);
(tbody
)上附加数据,请尝试手动添加tbody
标记,看看是否可以解决您的问题,也可以尝试将class="display"
添加到table
标签上,如下所示:https://datatables.net/manual/installation
更新:您还可以在调用DataTable插件后填充表,这是不可行的,因为该插件在加载之前需要设置正确的表,请参见我用工作正常的文档中提供的表格演示:https://jsfiddle.net/zn7gv3ux/
我认为您应该在从ajax请求中填充数据后,在成功回调中调用DataTable,这样可以确保您的表已准备好由插件处理。
所以这样做:
<script type="text/javascript">
$(document).ready(function() {
getData();
});
</script>
function getData() {
$.ajax({
type : "POST",
url : "productDetails/getProductList",
success : function(data) {
var trHTML = '';
for (var i = 0; i < data.length; i++) {
var item = data[i];
trHTML += '<tr>';
trHTML += '<td>'+ item.slno + '</td>';
trHTML += '<td>'+ item.productid + '</td>';
trHTML += '<td>'+ item.name + '</td>';
trHTML += '</tr>';
}
$('#tb_product_details tbody').append(trHTML);
$('#tb_product_details').DataTable(); //call the plugin here after appending datas
}
})
}
来自 GrafiCode Studio的 jsfiddle的片段,测试了我的解决方案:
$(document).ready(function() {
var trHTML = '<tr><td>1</td><td>1</td><td>1</td></tr><tr><td>2</td><td>2</td><td>2</td></tr>';
$('#tb_product_details tbody').append(trHTML);
$('#tb_product_details').DataTable();
});
<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<table class="table table-bordered" id="tb_product_details" width="100%" cellspacing="0">
<thead>
<tr>
<th>SL</th>
<th>Product ID</th>
<th>Product Name</th>
</tr>
</thead>
<tbody>
</tbody>
</table>