Cannot reinitialise DataTable - but it works!

stevesnow50

I have been using the excellent DataTables for some years now and I'm pretty conversant with it's functions.
I am currently integrating it into a Bootstrap 4 theme which initialises everything from an external minimised js file.
Additional DataTables attributes can be successfully added using their custom-data-config HTML5 attribute or a Javascript object.
The problem I am having is adding the code to add search panes to the the page.
As the table is already initialised, I have implemented this;

$(document).ready(function() { if ($.fn.dataTable.isDataTable('#sysusers')) { var table = $('#sysusers').DataTable(); } else { var table = $('#sysusers').DataTable( { searchPanes: true }); table.searchPanes.container().prependTo(table.table().container()); } });

This actually work OK but I still get the pop-up error.
Clicking OK clears the modal, the console is clear and everything works fine.

Any thoughts please?

Thank you

stevesnow50

Actually part of the functionality does not work properly so I suppose I am asking the same question that has been asked a thousand times about the error modal itself but I have tried all variations with the same result.

IgorB

Thanks, but with HTML it works success.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

stevesnow50

Colin

Thank you very much for your quick reply.
This is a pretty complex page - would it be enough for me to extract the initialisation code from the theme and include the relevant code from my page?

Steve

kthorngren

would it be enough for me to extract the initialisation code from the theme and include the relevant code from my page?

Are you saying you are initializing Datatables somewhere else in your code and the below is not for initialization?

$(document).ready(function() { if ($.fn.dataTable.isDataTable('#sysusers')) { var table = $('#sysusers').DataTable(); } else { var table = $('#sysusers').DataTable( { searchPanes: true }); table.searchPanes.container().prependTo(table.table().container()); } });

I suspect this code snippet is running before you are initializing Datatatbles. If so then you will need to move the searchPanes: true into your Datatable init code as documented in this solution of the technote.

Kevin

stevesnow50

I can do, and in fact have done that but my issue is that the initialisation is provided by a Bootstrap theme .js compilation which works well and I don't want to mess with.
All the table initialisation is done by that code with the functionality to add or override parameters, again which works fine.

My only issue is adding this code;

'table.searchPanes.container().prependTo(table.table().container());'

to the already initialised table.

I have tried the options here;

https://datatables.net/manual/tech-notes/3#Single-initialisation

But I still get the modal popup and the error.
That's my problem!

kthorngren

Remove this portion of code:

if ($.fn.dataTable.isDataTable('#sysusers')) { var table = $('#sysusers').DataTable(); } else { var table = $('#sysusers').DataTable( { searchPanes: true });

If you don't want to add searchPanes: true to the Bootstrap theme .js initialization then you can try using the setting defaults using searchPanes: true. This will apply to all Datatables you have on the page and would need to be executed before the Bootstrap theme .js initialization.

Move the table.searchPanes.container().prependTo(table.table().container()); to execute after the Bootstrap theme .js initialization.

Kevin

stevesnow50

Ok but how to reference 'table.' (the datatables object) when it hasn't been initialised on the page itself?
Forgive me if I'm not explaining myself correctly!

tangerine

$(document).ready(function() { if ($.fn.dataTable.isDataTable('#sysusers')) { var table = $('#sysusers').DataTable(); } else { var table = $('#sysusers').DataTable( { searchPanes: true }); table.searchPanes.container().prependTo(table.table().container()); } });

Looks like that code gets executed before your DT is initialised.

stevesnow50

Thanks all but my only question here now is;
How to add this code;
<var>.searchPanes.container().prependTo(<var>.table().container());
After the table is initialised by the theme script (separate file)
Without reinitialising the table and invoking the error.
What is the value of the variable <var> in this code?

kthorngren

Take a look at the accessing the API docs. You can do something like this:

var table = $('#sysusers').DataTable();
table.searchPanes.container().prependTo(table.table().container());

Kevin

tangerine

What is the value of the variable <var> in this code?

Why don't you test it and find out?
Have you actually investigated my previous suggestion? Is '#sysusers' a DT object at this point or not?

stevesnow50

If I put the table ID in that value, that's when I get the original error which is the whole root of my issue;

DataTables warning: table id=sysusers - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

Because the table is already initialised by the theme script.

stevesnow50

And none of the suggestions in the support link appear to have any affect.

kthorngren

This code:

var table = $('#sysusers').DataTable();
table.searchPanes.container().prependTo(table.table().container());

Needs to execute after you initialize Datatables. If it executes before you will get the reinitialize error because var table = $('#sysusers').DataTable(); is initializing Datatables with default settings then your Bootstrap init code is causing the error.

Using var table = $('#sysusers').DataTable(); after your Bootstrap initialization simply returns an instance of the API.

Kevin

tangerine

$(document).ready(function() { 
if ($.fn.dataTable.isDataTable('#sysusers')) { 
     var table = $('#sysusers').DataTable(); 
} else ....

My point was, is '#sysusers' a DT instance or not at that point? BUT I now wonder if you actually need
$(document).ready(function() { if ( ! $.fn.dataTable.isDataTable('#sysusers')) { var table = $('#sysusers').DataTable();

i.e. if no instance, get one.

stevesnow50

Tangerine
That is one of the options provided here
https://datatables.net/manual/tech-notes/3
but gives me the same error

tangerine

See my late edit.

stevesnow50

OK.

If it helps, here's my latest;

$(document).ready(function() {
if ($.fn.dataTable.isDataTable('#sysusers')) {
table = $('#sysusers').DataTable();
} else {
table = $('#sysusers').DataTable({
searchPanes: true
});
table.searchPanes.container().prependTo(table.table().container());
};
});

And if I added the ! ($(document).ready(function() {
if (!$.fn.dataTable.isDataTable('#sysusers')) { etc.

The result is the same.

Also it might be worth mentioning that the table initialises from the theme script using the class - it does not have a name at that point - that may or may not be relevant

Thanks again

kthorngren

Also it might be worth mentioning that the table initialises from the theme script using the class - it does not have a name at that point - that may or may not be relevant

It is relevant. Please read my comments on what you need to do.

If you still need help then we need to see a link to your page or a running test case showing the issue so we can provide specific steps of what to do.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

tangerine

It is relevant.

Nicely understated.
@stevesnow50, you've been testing against an id which you knew didn't exist.
However, if I were to detail my own mishaps you might be greatly comforted.

stevesnow50

Morning!

And on we go ...

If I remove the table ID and initialise by the class I get the same result.
It's just that the modal now refers to table id=DataTables_Table_0 instead of the manually allocated ID.

Another oddity is that the master table has 9 columns (0-8) and only columns 1,2 and 8 are displayed along with the modal.
I can see all the rest in the console but are classed 'dtsp-hidden' and the

<

div> has no content.
On the panes that ARE shown though I can see that the table

<

div> ID is incrementing as you would expect - DataTables_Table_3_wrapper etc.

This is my latest code;

$(document).ready(function() {
if ($.fn.dataTable.isDataTable('.table-datatable')) {
var table = $('.table-datatable').DataTable();
} else {
table = $('.table-datatable').DataTable({
searchPanes: true
});
table.searchPanes.container().prependTo(table.table().container());
};
});

The whole issue may be something to do with how the theme script is initialising the tables do you think?

kthorngren

You CAN NOT initialize Datatables more than once which is what you are doing. I've provided the steps to take to help solve your problem but you haven't tried any of them. I will outline them again:

1. Remove this code:

if ($.fn.dataTable.isDataTable('.table-datatable')) {
var table = $('.table-datatable').DataTable();
} else {
table = $('.table-datatable').DataTable({
searchPanes: true
});
table.searchPanes.container().prependTo(table.table().container());
};

1. Either place searchPanes: true in the theme script initialization code or use default settings, which needs to load before initializing the theme Datatable, with the searchPanes: true option. The best option is to just add the searchPanes: true to the theme init code.
2. Execute these statements after the theme initialization:

var table = $('#sysusers').DataTable();
table.searchPanes.container().prependTo(table.table().container());

If you don't want to try these steps then I will stop trying to help.

Kevin