[英]jQuery DataTable data disappears after sorting
我不确定为什么我的数据表中的数据在排序后会消失。
从用户单击提交按钮后触发的jQuery开始:
$('#searchSubmit').on('click', function()
{
var searchbooking = $('#searchbooking').val();
var searchbol = $('#searchbol').val();
$.post('api/search.php', {searchbooking: searchbooking, searchbol: searchbol}, function(data)
{
var obj = JSON.parse(data);
$('#tableBody').empty();
var htmlToInsert = obj.map(function (item)
{
return '<tr><td>'+item.BOL_DATE+'</td><td>'+ item.BOOKING_NUM +'</td></tr>';
});
$('#tableBody').html(htmlToInsert.join(''));
});
});
这是PHP脚本,我可以添加(第一次)使用SQLSRV编码:
<?php
if($_POST['searchbooking'] == true || $_POST['searchbol'] == true)
{
$_SESSION['where'] = "";
$searchbooking = stripslashes(str_replace( "'", "''", $_POST['searchbooking']));
$searchbol = stripslashes(str_replace( "'", "''", $_POST['searchbol']));
if($searchbooking != "")
{
if( $_SESSION['where'] != "" ) $_SESSION['where'] .= " AND ";
$_SESSION['where'] = "[BOOKING_NUM] = '".$searchbooking."'";
}
if($searchbol != "")
{
if( $_SESSION['where'] != "" ) $_SESSION['where'] .= " AND ";
$_SESSION['where'] .= "[BOL_NUM] = '".$searchbol."'";
}
$where = "WHERE " . $_SESSION['where'];
$select = "SELECT [BOL_DATE], [BOOKING_NUM] FROM [brokerage].[dbo].[detailbackup] ".$where."";
$query = sqlsrv_query($dbc, $select);
$out = array();
while( $row = sqlsrv_fetch_array($query, SQLSRV_FETCH_ASSOC) )
{
$out[] = $row;
}
echo json_encode($out);
?>
回到我的HTML页面,表格设置如下:
<table class='table table-striped table-bordered table-hover display nowrap' id='example1' cellspacing="0" width="100%">
<thead>
<tr>
<th>Bol Date</th>
<th>Booking Number</th>
</tr>
</thead>
<tbody id="tableBody">
</tbody>
</table>
在HTML页面的底部附近,在结束体标记上方,我有格式化DataTable的JavaScript:
<script type="text/javascript">
$('#example1').DataTable({
"iDisplayLength": 25,
"scrollX": true,
"scrollY": 550,
"order": [[ 0, "desc" ]],
"bLengthChange": true,
"bSort": true,
"bAutoWidth": true
</script>
通过上面添加的所有内容,我可以将数据返回到页面。 但是一旦我排序(甚至将表的长度从25改为50),数据就会消失。
有人看到我的错误吗?
您不能以这种方式向dataTables添加新行; 你必须通过API。 您只是在DOM表中插入新行,而不是dataTables内部,这就是为什么在排序(或过滤等)时行似乎消失了。 将dataTable实例保存在全局变量中:
table = $('#example1').DataTable({
"iDisplayLength": 25,
...
})
现在重写整个$.post
以使用API而不是jQuery DOM操作:
$.post('api/search.php', {searchbooking: searchbooking, searchbol: searchbol}, function(data) {
table.clear() //clear content
var obj = JSON.parse(data);
obj.forEach(function(item) { //insert rows
table.row.add([item.BOL_DATE, item.BOOKING_NUM])
})
table.draw() //update display
})
htmlToInsert = obj.map(...)
将htmlToInsert
转换为数组,因此您需要将其转换回带有.join()
的字符串:
$('#tableBody').html(htmlToInsert.join(''));
其次,您没有在$.post
调用中指定数据类型。 根据文档 ,第四个论点是:
服务器所需的数据类型。 默认值:智能猜测(xml,json,脚本,文本,html)。
让它对jQuery的猜测可能使你自己对JSON.parse
的调用失败,因为data
可能已经很好地成为了一个对象。
消除这种风险,将数据类型放在$.post
的第4个参数中:
}, 'json');
并删除对JSON.parse
的调用,如下所示:
obj = data;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.