我不确定为什么我的数据表中的数据在排序后会消失。
从jQuery开始,一旦用户单击提交按钮就会触发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(''));
});
});
这是我第一次使用SQLSRV编码的PHP脚本:
<?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而不是jQueryDOM操作:
$.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,script,text,html)。
让jQuery猜测可能会使您自己对JSON.parse
的调用失败,因为data
很可能已经是一个对象了。
去掉这个风险,将数据类型放在$.post
:的第四个参数中
}, 'json');
并删除对JSON.parse
的调用,如下所示:
obj = data;