jQuery Datatables填充搜索數據

Question

在document.ready上，我的數據表會相應加載。

我需要做的是構建一個功能，如果用戶進行搜索，該功能將重新加載數據表。

因此，數據表的加載如下：

$(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. 清除數據表-數據表clear（）
2. 將新數據添加到表-datatables rows.add（）
3. 調整列大小（可選）-數據表Adjust.columns（）

4. 使用新數據重新繪制數據表-數據表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 }); } }); });