jQuery Datatables填充搜索数据

Question

On document.ready, my Datatable loads accordingly.

What I need to do is build a feature that reloads the Datatable if the user conducts a search.

So the Datatable loads like this:

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

As you will see in the above code, when the document is ready, if the user does not conduct a search, I load all of the data from the process called 'displayQnams.php'.

But if the user conducts a search, the parameters are sent to another process called 'qnamsSearch.php'.

How do I reload the datatable with the search results from 'qnamsSearch.php'?

I tried to create a variable from inside the post:

var dataUrl = data;

And I tried to call that variable in the ajax call:

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

But the Datatable will not display anything and there are no console errors.

How can I make this work?

Answer 1

You can try using this.

After user click search button, below is the flow:

1. Clear datatables - datatables clear()
2. Add new data to the table - datatables rows.add()
3. Adjust column size (optional) - datatables adjust.columns()

4. Redraw back datatable with new data - 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 }); } }); });