Cannot reinitialise DataTable - but it works!
Cannot reinitialise DataTable - but it works!
stevesnow50
Posts: 12Questions: 2Answers: 0
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;
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
This discussion has been closed.
Answers
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.
Thanks, but with HTML it works success.
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
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
Are you saying you are initializing Datatables somewhere else in your code and the below is not for initialization?
I suspect this code snippet is running before you are initializing Datatatbles. If so then you will need to move the
searchPanes: trueinto your Datatable init code as documented in this solution of the technote.Kevin
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!
Remove this portion of code:
If you don't want to add
searchPanes: trueto the Bootstrap theme .js initialization then you can try using the setting defaults usingsearchPanes: 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
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!
Looks like that code gets executed before your DT is initialised.
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?
Take a look at the accessing the API docs. You can do something like this:
Kevin
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?
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.
And none of the suggestions in the support link appear to have any affect.
This code:
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
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.
Tangerine
That is one of the options provided here
https://datatables.net/manual/tech-notes/3
but gives me the same error
See my late edit.
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
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
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.
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?
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:
searchPanes: truein the theme script initialization code or use default settings, which needs to load before initializing the theme Datatable, with thesearchPanes: trueoption. The best option is to just add thesearchPanes: trueto the theme init code.If you don't want to try these steps then I will stop trying to help.
Kevin