Select plugin - select all with an inital empty DataTable

transporter_ii

I'm downloading the data for a DataTable from outside of the DataTable. To make the loading spinner work while downloading the data, I was binding the DataTable to an empty dataset before downloading the data. So it goes kind of like this:

dtTblPackage(fakeData);
table.processing(true);
...download data...
dtTblPackage(data);
table.processing(false);

All works great, and gives loading spinners. If I don't load the "fakeData", I get no loading spinners on page load.

I didn't notice at first, but on the first load of this page, the select plugin's 'select all' header checkbox doesn't work. Anything that I do that downloads the data again, the 'select all' checkbox goes to work as expected.

I've narrowed it down to the initial load of that empty data set. If I comment that out, the 'select all' header checkbox works as expected, but the loading spinner no longer works.

I have the table set to bDestroy: true.

Are there any tricks here that would get me progress indicator and the 'select all' header checkbox to work on the initial page load?

Something as simple as this works:

dtTblPackage(data);
dtTblPackage(data);

But some tables can be quite large, so building the table twice doesn't seem like the way to do it.

Thanks,

kthorngren

If I don't load the "fakeData", I get no loading spinners on page load.

I'm guessing that is because you haven't initialized Datatables so table.processing(true); results in a Javascript error.

I have the table set to bDestroy: true.

If you aren't reconfiguring the Datatable you might not need this and instead use clear() and rows.add() to populate the Datatable with the new data.

I didn't notice at first, but on the first load of this page, the select plugin's 'select all' header checkbox doesn't work.

Is this with the empty data set or after you have loaded the table rows?

Do you see errors in the browser's console?

It's not clear from your code snippets where the problem might be. I built a simple test case based on your code snippets and some assumptions and it seems to work:
https://live.datatables.net/navadoka/1/edit

Please update the test case or provide a link to a test case replicating the issue so we can understand your code flow and help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

transporter_ii

OK, I initially thought your suggestion was working, but I had not had enough coffee yet.

Looking at your example, it looks pretty much like my code. Nothing is jumping out at me.

I stripped everything down to the bare minimum and made two pages. One of them with loading empty data and one of them without. It's pretty much your example with "dtTblPackage( fakeData );" commented out on one.

http://vue.qwest4.com/playground/datatables_select-not-working.html
http://vue.qwest4.com/playground/datatables_select-working.html

Since it's only a problem on page load, unless something jumps out at someone, I'm about ready to just load a loading spinner outside of the DataTables and call it a day.

Thanks,

kthorngren

Looks like the problem is you are loading select.js twice:

   <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/select/2.0.4/js/dataTables.select.js"></script>
    <script type="text/javascript" language="javascript"
        src="https://cdn.datatables.net/select/3.0.0/js/select.dataTables.js"></script>

It looks like the click events are attached to the wrong Datatables instance:

Note the dt.rows().count(), lower right console output, results in 0 rows. instead of 3 rows.

Use the Download Builder to get the latest Datatables and select versions. Or, if you don't want to upgrade Datatables yet then use it to get the CDN for select 3.0.0 so you can get the proper select.css.

You will then want to remove this:

 <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.8/css/dataTables.dataTables.min.css">

Which I believe is loading the select and datatables.css and replace it with the proper .css includes.

Kevin