How to get row count for a ajax-sourced table after the table has been updated?

IdahoDixon

Table:
notesTable = $('#NotesListTable').DataTable({
ajax: {
url: '@Url.Action("GetCaseNotes", "Case", new { caseId = Model.CaseId })',
dataSrc: ''
},
(etc)

If a user action updates the associated data in the database, then the following RefreshTable() method is called ... and the table updates very nicely:

function RefreshTable(tableId, dataUrl) {
var table = $('#' + tableId).DataTable();
table.clear();
table.ajax.url(dataUrl).load();
}

QUESTION: I'd like to update a total records count (num pages * rows per page) elsewhere in the view ... but can't seem to figure out how to get the NUMBER OF TOTAL ROWS. I do have the notesTable var above that I can use, but nothing seems to work, e.g. notesTable.rows().count() ... or .length or .data().rows() etc etc. Please help! How to get the number of total records after the Ajax table update above???

Thanks,

kthorngren

Without seeing the code its hard to say but my guess is you are trying to get the rwo count before the ajax request has completed. Since ajax is an async process your code executing notesTable.rows().count() might execute too early. Looking at the ajax.url().load() docs their is a callback you can call in the load() method that executes after the new data is loaded and the Datatable has drawn. You probably will want to use this callback to the get row count and update the view.

If this doesn't help then we will need to see what you are doing. Please post al ink to your page or a test case replicating the issue. This will allow us to help you debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

IdahoDixon

kthorngren - Yes, thank you! I hadn't realized (late afternoon brain) that you could provide a callback to the load() method. This was key and it works fine. I pass in the ID of the element that will contain the new row count and set it in the load() callback, and this works perfectly!!! Here's my updated RefreshTable() method - hope this helps someone:

function RefreshTable(tableId, dataUrl, rowCountId) {
      var table = $('#' + tableId).DataTable();
      table.clear();
      table.ajax.url(dataUrl).load(function() {
          // Callback loads updated row count into a DOM element
          // (a Bootstrap badge on a menu item in this case):
          var rowCount = table.rows().count();
          if (rowCountId) {
              if (Number(rowCount) > 0) {
                  $('#' + rowCountId).show();
                  $('#' + rowCountId).html(rowCount);
              } else {
                  $('#' + rowCountId).hide();
                  $('#' + rowCountId).html('');
              }
            }
        });
}

Updated DOM element: