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

これを試すことができます。 - datatables clear()

テーブルに新しいデータを追加 - datatables rows.add()

する列のサイズを調整します（オプション） - datatables adjust.columns()

1. クリアのDataTable：
   ユーザクリック検索ボタン後

   は、以下の流れであります

   新しいデータでデータテーブルを再描画 - 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 
          }); 
         } 
        }); 
   });