[英]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.