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 
          }); 
         } 
        }); 
   });