jQuery DataTable从搜索中重新填充表

时间:2016-06-06 18:50:04

标签: javascript php jquery datatables

我有一个在文档准备就绪时填充DataTable的函数。

 $(document).ready(function()
 {
   var $dataTable = $('#example1').DataTable({
   "ajax": 'api/qnams_all.php',
   "dataType": "json",  
   "bDestroy": true,
   "stateSave": true
   });

   // this portion reloads the datatable without refreshing the page
   setInterval(function() {
     $dataTable.ajax.reload();
   }, 60000);
 }

所以现在我想添加搜索功能。它基本上会使用从服务器返回的搜索数据重新填充DataTable。

以下是用于检索用户输入的参数的jQuery:

 $('#searchSubmit').on('click', function()
 {
   var searchbooking = $('#searchbooking').val();
   var searchquote = $('#searchquote').val();

   $.ajax({
     url:'api/qnams_all.php',
     type:"POST",
     data:{searchbooking: searchbooking, searchquote: searchquote},
     contentType:"application/x-www-form-urlencoded; charset=UTF-8",
     dataType:"json"
   }).done(function(response){
      console.log(response.data)
   }).fail(function(){
      alert('error');
   }).always(function(){
      alert('done');
   });
 });

以下是api / qnams_all.php中的PHP过程:

 <?php
   include("../include/database.php");
   include("../include/sessions.php");

   $_SESSION['where'] = "";
   $searchbooking = strip_tags(mysqli_real_escape_string($dbc, trim(strtoupper($_POST['searchbooking']))));
   $searchquote = strip_tags(mysqli_real_escape_string($dbc, trim(strtoupper($_POST['searchquote'])))); 

   // build the WHERE clause
   if($searchbooking != ""){
     $_SESSION['where'] = "booking = '".$searchbooking."'";
   }
   if($searchquote != ""){
     if( $_SESSION['where'] != "" ) 
     $_SESSION['where'] .= " AND ";$_SESSION['where'] .= "quote = '".$searchquote."'";
   }

   // check if WHERE is blank
   if($_SESSION['where'] == ""){$where = "where TLI_COMPLETE = 'N'";}
   else{$where = $_SESSION['where'];}

   // run the query
   $select = "SELECT 
                CONCAT('\"',COALESCE(booking,''),'\"')
                ,CONCAT('\"',COALESCE(quote,''),'\"')
              FROM
                searchTable " . $where . "";

   $query = mysqli_query($dbc, $select) or die(mysqli_error());
   $resnum = mysqli_num_rows($query);   

   echo "{\"data\":[";
   $i = 1;  
   while($row = $query->fetch_assoc())
   {
     echo "[";
       echo implode(', ', $row);
     echo "]";
     if($i < $resnum){
       echo ",";
     }
     $i++;
   }
 }
 echo "]}";
 mysqli_free_result($query);    
 ?>

上面的PHP过程与$(document).ready()函数完美配合。

我的问题是:如何操作我的代码,以便搜索功能与ready()函数一起使用?

目前,搜索功能位于ready()功能之外。我可以在ready()函数中应用搜索功能吗?如果是这样,AJAX调用会是什么样的?

目前,它的内容如下:

 "ajax": 'api/qnams_all.php'

如果我能够将搜索添加到ready()函数,这个AJAX调用会改变吗?

要将它放在一个问题中,如何将搜索功能添加到ready()功能,以便我可以初始显示数据,然后在用户决定搜索记录时重新填充数据?

1 个答案:

答案 0 :(得分:0)

您必须保留相同代码的两个副本(ajax部分)

  1. document.ready async:false ajax onClick function。(将在页面打开时加载搜索结果)。
  2. 现在位于dart:mirrors内的原始位置。(默认行为)。
  3. 那是因为你需要在eventListener中包装你的ajax调用,在这里你必须分开事件。