Display Loading message when using $.ajax() and table.clear().rows.add(results.data).draw();

eponym

Hi Guys-

Wondering what would be the best method for displaying a loading message in the table when using: $.ajax() and table.clear().rows.add(results.data).draw(); to load data. Is there a way of triggering loadingRecords, so I can get the same loading message when I first initialize the table. Or should I temporarily add a row prior to the ajax call and then remove it on success?

NOTE: I would have liked to have destroyed and re-initialized the tables in order to make use of language: loadingRecords to do this, but found that the re-intialization caused issues loading child row data. Based on your advise from a previous thread, I am successfully using $.ajax() and table.clear().rows.add(results.data).draw(); to load new row data including the row data for the child row. Thanks again by the way!

Thanks!

David

kthorngren

Use the processing() plugin to display the Datatables processing indicator. Start the processing indicator before fetching via $.ajax() and in the success function stop the processing indicator after using rows.add().

Kevin

eponym

Thank you Kevin.

Sorry to say I haven't gotten the processing to work. Downloaded processing().js and load it from a script tag in index.html along with datatables.min.js when loading the webpage.

<script src="../DataTables/datatables.min.js"></script>
<script src="../DataTables/processing().js"></script>

Then within the function that makes the ajax call and updates the table I tried a couple of things: Test One uses the example that is given, but complains about trying to reinitialize the table. Which makes sense. Test Two simply creates a reference to the table which has already been initialized and then sets processing to true. This does not display any feedback for processing, but just loads the new data into the table, as planned. Do you have any guidance? Thanks! -D

getDataPost_DT: function (url, postDat) {
    //TEST ONE
    // var table = $('#data_table').DataTable({
    //   processing: true,
    // });

    // table.processing(true);

    //TEST TWO
    table = $('#data_table').DataTable();
    table.processing(true);

    var alertMess = 'AJAX_DT Error';
    snyc = $.ajax({
      type: 'POST',
      url: url,
      contentType: 'application/json',
      dataType: 'json',
      async: true,
      data: JSON.stringify(postDat),

      success: function (results) {
        table.processing(false);

        table.clear().rows.add(results.data).draw();
        $('#resultMessage').html(results.data.length + ' items');
      },
      error: function (jqXHR, textStatus, errorThrown) {
        alert(
          alertMess +
            ':  ' +
            jqXHR.status +
            ' ' +
            errorThrown +
            ' ' +
            jqXHR.responseText
        );
      },
    });
  }

kthorngren

Presumably you have a Datatable initialization somewhere else. That is where you put processing: true with the other init options. Try that and let us know the results.

Kevin

eponym

Thanks Kevin.

I copied and pasted the raw code into a new file, saving it at processing().js and placed it in the same directory as datatables.min.js.

I load it in index.js

In the file that initializes the datatable, I have placed the option processing: true like so:

const table = $('#data_table').DataTable({
      processing: true,
      dom: 'fBitpi',
      buttons: ['pageLength'],
      info: true,
      pageLength: 10,
      order: order,
      columnDefs: [{className: 'text-center', targets: [centeredCol]}],
      columns: cols,
      language: {
...

And the function I use to make the call to the database to load new data looks like this:

  getDataPost_DT: function (url, postDat) {
    table = $('#data_table').DataTable();
    table.processing(true);

    $('#data_table_info').html('Searching...');

    var alertMess = 'AJAX_DT Error';
    sync = $.ajax({
      type: 'POST',
      url: url,
      contentType: 'application/json',
      dataType: 'json',
      async: true,
      data: JSON.stringify(postDat),

      success: function (results) {
        // table.processing(false);

        table = $('#data_table').DataTable();
        table.clear().rows.add(results.data).draw();
        $('#resultMessage').html(results.data.length + ' items');
      },
      error: function (jqXHR, textStatus, errorThrown) {
        alert(
          alertMess +
            ':  ' +
            jqXHR.status +
            ' ' +
            errorThrown +
            ' ' +
            jqXHR.responseText
        );
      },
    });
  },

Datatable gets loaded with new data, but no processing feedback displays.

BTW: as a work around I wrote some code to display the text Searching... in $('#data_table_info') before the ajax call and let it be replaced by the update in success. I'm actually okay with this as an answer, but would like to understand why the process() is not working.

Thanks for your help!

David

kthorngren

Its hard to say why its not working without seeing the problem. I took some of your code an put in this test case:
https://live.datatables.net/dodobuge/33/edit

The processing indicator is working. If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug. You can update my test case if you wish.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

The only thing I can think of is using const table = $('#data_table').DataTable({ might cause issues when trying to assign table here:

getDataPost_DT: function (url, postDat) {
  table = $('#data_table').DataTable();

Are you getting an error that you can reassign the table constant?

Kevin