language.loadingRecords doesn't work when passing data through data parameter instead of ajax

jack21

I have a very wide table that takes quite some time to render, so the "Loading..." indicator (or the custom one I'm using in this case) is quite helpful while the table renders.

When I get data through ajax, the loader-spinner works well:

$('#example').DataTable({
    ajax: {
       url: url,
     },
    language: {
        'loadingRecords': '<div class="loader-spinner"></div>',
    },
  });

However, I'm trying to load data via multiple promises, which I need to load through via the data parameter:

$('#example').DataTable({
    data: dataFromPromises
    language: {
        'loadingRecords': '<div class="loader-spinner"></div>',
    },
  });

In this case, the spinner doesn't show, and the table displays much wider than it should (the hidden columns aren't hidden, as they are when using the ajax parameter.

Any ideas on how I can duplicate the table UI from the ajax call when passing data into the data parameter?

kthorngren

the table displays much wider than it should (the hidden columns aren't hidden,

The table hasn't been initialized by Datatabels, its the plain HTML table you are seeing. The ajax option is asynchronous allowing Datatables to initialize the table while waiting for the data. The data option, according to the docs, accepts an array but you are passing a function (at least I think you are passing a function).

Any ideas on how I can duplicate the table UI from the ajax call when passing data into the data parameter?

You can use blockUI or busyLoad to display a loading message. See this thread and there are others with ideas of how to use either of these.

One option is to hide the table and in initComplete display the fully initialized Datatable. Or you can initialize the Datatable without any data and use a separate jQuery ajax() to fetch the data and in the success function use rows.add() to populate the previously initialized Datatable.

Kevin

jack21

Thanks Kevin. I am passing in an array to data, and it functionally works fine, but as you suggest, it renders as pure HTML.

I'll play around with these options, thanks for sending