我不确定为什么我的数据表中的数据在排序后会消失。
从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;