排序后jQuery DataTable数据消失

时间:2016-07-26 20:41:13

标签: javascript php jquery html datatables

我不确定为什么我的数据表中的数据在排序后会消失。

从用户点击提交按钮后触发的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页面的底部,在结束体标记上方,我有JavaScript格式化DataTable:

 <script type="text/javascript">
   $('#example1').DataTable({
     "iDisplayLength": 25,
     "scrollX": true,
     "scrollY": 550,
     "order": [[ 0, "desc" ]],
     "bLengthChange": true,  
     "bSort": true,   
     "bAutoWidth": true   
 </script>

根据我上面添加的所有内容,我可以将数据返回到页面。但是一旦我排序(甚至将表格的长度从25改为50),数据就会消失。

有人看到我的错误吗?

2 个答案:

答案 0 :(得分:3)

您不能以这种方式向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
})

答案 1 :(得分:2)

htmlToInsert = obj.map(...)htmlToInsert变为数组,因此您需要将其转换回.join()字符串:

$('#tableBody').html(htmlToInsert.join(''));

其次,您尚未在$.post来电中指定数据类型。根据{{​​3}},第四个论点是:

  

服务器所需的数据类型。默认值:智能猜测(xml,json,脚本,文本,html)。

让它猜测jQuery可能会让你自己调用JSON.parse失败,因为data可能已经很好地成为了一个对象。

消除此风险,将数据类型放在$.post的第4个参数中:

}, 'json');

并删除对JSON.parse的调用,如下所示:

obj = data;