How can I use ajax.reload with jQuery datatable

Question

User1001065250 posted

  <script>
    var dataTable;
    var resultsContainer = $('#ResultsContainer');

    $(document).ready(function() {
      dataTable = $('#SearchResultsTable').DataTable({
        "columns": [
          { "data": "clientId" },
          { "data": "lastName"   },
          { "data": "firstName"  }
        ],
        "language": {
          "zeroRecords": '@Resource.NoRecordsFound'
        },
        "searching": false,
        "lengthChange": false
      });
    });

    $('#SearchButton').click(function (e) {
      e.preventDefault();
      RequestData();
    });

    function RequestData() {
      $.post('@Url.Content("?handler=ClientSearch")', $('#ClientSearchForm').serialize(), function (data) {
        ProcessResponse(data);
      });
    }

    function ProcessResponse(data) {  
        dataTable.clear();
        dataTable.rows.add(data);
        dataTable.draw();
        resultsContainer.addClass('d-block');
    }

  </script>

I have a requirement to make a search form that will call a web api and populate a jQuery DataTable when a button is clicked. I don't want to load the form until the button is clicked so I have a separate button handler to call my post method. I was told I should use ajax.reload() with this in case someone has to search again to narrow the results but am having some trouble working it into my code. Can anyone assist me with my requirement?

Answer 1

User839733648 posted

Hi mrburnttoast79,

According to your description and code, I'm sorry that I could not understand your reuqirment clearly.

I've tried your code and it seems to work well.

When you click the button, the datatable will load the eligible datas by RequestData() and ProcessResponse().

I was told I should use ajax.reload() with this in case someone has to search again to narrow the results but am having some trouble working it into my code.

I'm confused that why to use ajax.reload()? I think your code works well.

And if you still wants to use it, how do you try and what is the trouble you've met?

If possbile, please describe your issue more in details so that it will be easier for us to help with you.

Besides, about ajax.reload(), you could refer to: https://datatables.net/reference/api/ajax.reload()

Best Regards,

Jenifer

Answer 2

User1001065250 posted

The code works as is. However I was told that it is more efficient to create the table once and then use ajax reload to repopulate the table each time the search button is clicked again. I was just curious if anyone knew how to do this.

Answer 3

User839733648 posted

Hi mrburnttoast79,

I suggest that you could use .ajax to pass your data and use ajax.reload() to keep the searching result.

You could make this work even there is pagination.

table.ajax.reload(null, false);

The first parameter is a callback function.

The second parameter is resetPaging, if is true will reset the datatable to default, if is false will hold the current paging position. 

For more about ajax.reload(), you could refer to: https://datatables.net/reference/api/ajax.reload()

You could also refer to this link to check the working sample: https://datatables.net/extensions/select/examples/initialisation/reload.html

Best Regards,

Jenifer