jquery数据表填充搜索数据

Question

在document.ready上，我的数据表相应地加载。

我需要做的是构建一个功能，在用户进行搜索时重新载入数据表。

所以DataTable中加载这样的：

$(document).ready(function() 
{ 
    $('#searchSubmit').on('click', function() // used for searching 
    { 
    var searchbooking = $('#searchbooking').val(); 
    var searchquote = $('#searchquote').val(); 
    var searchtli = $('#searchtli').val(); 

    if(searchbooking == "" && searchquote == "" && searchtli == "") 
    { 
     $('.message').text('You did not enter any search criteria.'); 
     return false; // making sure they enter something 
    } 
    else 
    { 
     $.post('api/searchAll.php', {searchbooking:searchbooking, searchquote:searchquote, searchtli:searchtli}, function(data) 
     { 
     // what do i do here??? 
     // how do I get the return results to load 
     }); 
    } 
    }); 
    // if the user does not enter any search parameters, load everything 
    $('#example1').DataTable({  
    "ajax": { 
     "url": "api/displayQnams.php", 
     "type": "POST", 
     "dataSrc": '' 
    }, 
    "columns": [ 
     { "data": "" }, 
     { "data": "column1" }, 
     { "data": "column2" }, 
     { "data": "column3" } 
    ], 
    "iDisplayLength": 25, 
    "order": [[ 6, "desc" ]], 
    // and so on 
    }); 
}); 

正如你会在上面的代码中看到，当文档准备好，如果用户不进行搜索，我加载所有从数据过程称为'displayQnams.php'。

但是，如果用户进行搜索，参数将被发送到另一个名为'qnamsSearch.php'的进程。

如何使用'qnamsSearch.php'中的搜索结果重新加载数据表？

我试图创建从后里面的变量：

var dataUrl = data; 

我试图调用Ajax调用该变量：

"ajax": { 
    "url": dataUrl, 
    "type": "POST", 
    "dataSrc": '' 
} 

但数据表将不显示任何东西，有没有控制台错误。

我该如何做这项工作？

预先感谢您。

Answer 1

你可以尝试使用这个。

用户点击搜索按钮后，下面是流动：

1. 清除数据表 - datatables clear()
2. 添加新数据表 - datatables rows.add()
3. 调整列大小（可选） - datatables adjust.columns()

4. 用新数据重新绘制数据表 - datatables draw()

   $(document).ready(function(){ 
       var datatable = $('#example1').DataTable({  
        "ajax": { 
         "url": "api/displayQnams.php", 
         "type": "POST", 
         "dataSrc": '' 
        }, 
        "columns": [ 
         { "data": "" }, 
         { "data": "column1" }, 
         { "data": "column2" }, 
         { "data": "column3" } 
        ], 
        "iDisplayLength": 25, 
        "order": [[ 6, "desc" ]] 
       }); 
   
       $('#searchSubmit').on('click', function(){ 
        var searchbooking = $('#searchbooking').val(); 
        var searchquote = $('#searchquote').val(); 
        var searchtli = $('#searchtli').val(); 
   
        if(searchbooking == "" && searchquote == "" && searchtli == ""){ 
         $('.message').text('You did not enter any search criteria.'); 
         return false; // making sure they enter something 
        } else { 
         $.post(
          'api/searchAll.php', 
          { searchbooking:searchbooking, searchquote:searchquote, searchtli:searchtli }, 
          function(data) { 
           var newData = data; 
           datatable.clear().draw(); 
           datatable.rows.add(newData); // Add new data 
           datatable.columns.adjust().draw(); // Redraw the DataTable 
          }); 
         } 
        }); 
   });