Cannot reinitialise datatable for more information about this error

DataTables has a wide range of configuration options which can be used to customise the table at initialisation time, but only at initialisation time. After a DataTable has been initialised any attempt to use these options will result in an error.

Meaning

Simply put, DataTables does not allow initialisation options to be altered at any time other than at initialisation time. Any manipulation of the table after initialisation must be done through the API and trying to set the initialisation options once the table has already been initialised will result in the error:

DataTables warning: table id={id} — Cannot reinitialise DataTable.

where {id} is replaced with the DOM id of the table that has triggered the error.

Diagnosis

This error is triggered by passing in options to a DataTables constructor object when the DataTable instance for the selected node has already been initialised. For example:

$('#example').dataTable( {
    paging: false
} );


$('#example').dataTable( {
    searching: false
} );

will result in an error when the second block of code is run, since #example is already initialised as a DataTable.

Resolution

There are a number of ways that this error can crop up in code, so there also a number of different methods that can be used to resolve the issue, depending upon exactly what you are trying to achieve.

Single initialisation

If you want to make use of multiple DataTables initialisation options, simply apply them all together to the table. In the case of the example error above, where we try to disable paging and searching we would use:

$('#example').dataTable( {
    paging: false,
    searching: false
} );

For more information on initialisation of DataTables and the options available, please refer to the initialisation options manual.

Object instance retrieval

This error can often occur when trying to obtain a reference to the DataTable for working with the API. For example, you might have a function which will always try to create a DataTable instance by passing in options when created. Then you make a modification which calls this function on a table which has already been initialised and you get this error.

In such a case, you will want to use the $.fn.dataTable.isDataTable() static method. This can be used to check if a table is a DataTable or not already:

if ( $.fn.dataTable.isDataTable( '#example' ) ) {
    table = $('#example').DataTable();
}
else {
    table = $('#example').DataTable( {
        paging: false
    } );
}

retrieve

In acknowledgement that the above code structure isn’t always particularly attractive, DataTables has a retrieve option which can be used to tell DataTables that you are aware that the initialisation options can’t be changed after initialisation, and that should that occur, that you just want the DataTable instance to be returned.

This optional parameter can provide a short-cut to the explicit check using $.fn.dataTable.isDataTable() as above when obtaining a DataTables instance:

table = $('#example').DataTable( {
    retrieve: true,
    paging: false
} );

destroy

Sometimes you really will want to change the initialisation parameters of the table for cases where the API simply doesn’t provide the options that you need. This can be done in one of two different ways, each of which are essentially the same, but with an explicit method and short-cut option, as above.

The basis for altering the initialisation parameters, is that you need to destroy the old table and then create a new one with your new options. This has a very significant performance hit on the page, since a lot of calculations and DOM manipulation is involved, so if you can avoid this, and use the API, that is very strongly encouraged!

DataTables provides a destroy() method to destroy an old table, so you would be able to initialise a new one in its place. For example:

table = $('#example').DataTable( {
    paging: false
} );

table.destroy();

table = $('#example').DataTable( {
    searching: false
} );

Note that paging will be enabled in the second initialisation here as it is a completely new DataTable and paging is not explicitly disabled!

As a short-cut, like the retrieve option, there is also a destroy option that can be used to DataTables that you know that it is going to destroy the existing table to apply the new options. As such, the above destroy example could be shortened to be:

$('#example').DataTable( {
    paging: false
} );

$('#example').DataTable( {
    destroy: true,
    searching: false
} );

The retrieve and destroy options are mutually exclusive and cannot be used together (doing so will result in undefined behaviour).

Reason

The reason that DataTables initialisation options cannot be changed dynamically after initialisation is that it would add a large amount of code to the core code base to add this ability (for example dynamically enabling and disabling scrolling would be quite complex). The result is that this ability is not available to keep the DataTables core code as lean as possible. As noted above, if it is essential for you to be able to dynamically enable and disable features, the destroy option can be used, noting the performance impact that this will have.

3. Warning: Cannot reinitialise DataTable

DataTables has a wide range of configuration options which can be used to customise the table at initialisation time, but only at initialisation time. After a DataTable has been initialised any attempt to use these options will result in an error.

Meaning

Simply put, DataTables does not allow initialisation options to be altered at any time other than at initialisation time. Any manipulation of the table after initialisation must be done through the API and trying to set the initialisation options once the table has already been initialised will result in the error:

DataTables warning: table > — Cannot reinitialise DataTable.

where is replaced with the DOM id of the table that has triggered the error.

Diagnosis

This error is triggered by passing in options to a DataTables constructor object when the DataTable instance for the selected node has already been initialised. For example:

will result in an error when the second block of code is run, since #example is already initialised as a DataTable.

Resolution

There are a number of ways that this error can crop up in code, so there also a number of different methods that can be used to resolve the issue, depending upon exactly what you are trying to achieve.

Single initialisation

If you want to make use of multiple DataTables initialisation options, simply apply them all together to the table. In the case of the example error above, where we try to disable paging and searching we would use:

For more information on initialisation of DataTables and the options available, please refer to the initialisation options manual.

Object instance retrieval

This error can often occur when trying to obtain a reference to the DataTable for working with the API. For example, you might have a function which will always try to create a DataTable instance by passing in options when created. Then you make a modification which calls this function on a table which has already been initialised and you get this error.

In such a case, you will want to use the $.fn.dataTable.isDataTable() static method. This can be used to check if a table is a DataTable or not already:

retrieve

In acknowledgement that the above code structure isn’t always particularly attractive, DataTables has a retrieve option which can be used to tell DataTables that you are aware that the initialisation options can’t be changed after initialisation, and that should that occur, that you just want the DataTable instance to be returned.

This optional parameter can provide a short-cut to the explicit check using $.fn.dataTable.isDataTable() as above when obtaining a DataTables instance:

destroy

Sometimes you really will want to change the initialisation parameters of the table for cases where the API simply doesn’t provide the options that you need. This can be done in one of two different ways, each of which are essentially the same, but with an explicit method and short-cut option, as above.

The basis for altering the initialisation parameters, is that you need to destroy the old table and then create a new one with your new options. This has a very significant performance hit on the page, since a lot of calculations and DOM manipulation is involved, so if you can avoid this, and use the API, that is very strongly encouraged!

DataTables provides a destroy() method to destroy an old table, so you would be able to initialise a new one in its place. For example:

Note that paging will be enabled in the second initialisation here as it is a completely new DataTable and paging is not explicitly disabled!

As a short-cut, like the retrieve option, there is also a destroy option that can be used to DataTables that you know that it is going to destroy the existing table to apply the new options. As such, the above destroy example could be shortened to be:

The retrieve and destroy options are mutually exclusive and cannot be used together (doing so will result in undefined behaviour).

Reason

The reason that DataTables initialisation options cannot be changed dynamically after initialisation is that it would add a large amount of code to the core code base to add this ability (for example dynamically enabling and disabling scrolling would be quite complex). The result is that this ability is not available to keep the DataTables core code as lean as possible. As noted above, if it is essential for you to be able to dynamically enable and disable features, the destroy option can be used, noting the performance impact that this will have.

Источник

Cannot reinitialise DataTable — but it works!

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?

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.

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?

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?

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.

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;

to the already initialised table.

I have tried the options here;

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: 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.

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;
.searchPanes.container().prependTo( .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 in this code?

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

What is the value of the variable 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?

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 — 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.

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.

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.

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

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

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.

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 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

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

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?

Источник

Datatables warning(table cannot reinitialise data table

In this tutorial, we will discuss how to fix the error, Datatables warning(table cannot reinitialise data table.

Datatables warning(table cannot reinitialise data table

The error comes while I was trying to retrieve more than 5000 items using Rest API from a SharePoint Online list and was trying to bind to the data to DataTables.

Here, I was using the code like below:

But it gave the error when I tried to execute the code. It gave error as:

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

To fix the error, you need to add the below attribute.

It will look like below:

You may like following SharePoint rest api tutorials:

After this the error did not came, this fix the issue Datatables warning(table cannot reinitialise data table.

Hello Everyone!! I am Bhawana a SharePoint MVP and having about 10+ years of SharePoint experience as well as in .Net technologies. I have worked in all the versions of SharePoint from wss to Office 365. I have good exposure in Customization and Migration using Nintex, Metalogix tools. Now exploring more in SharePoint 2016 🙂 Hope here I can contribute and share my knowledge to the fullest. As I believe “There is no wealth like knowledge and no poverty like ignorance”

Источник

Cannot Reinitialise DataTable #1160

I have a WebSocket connection that updates my tables if there is a change in a row data, when the WebSocket get the message of the change, the code do the work and splice and push the data to the model bound with table, and I have to use $scope.$apply() to see the visual update, and after using $apply the table disappear from the view.

This is how I am initializing my data table:

And below id my HTML code:

I am using the following bower dependencies:

And this is the exact message I get in the pop-up:

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

And after this error table is disappeared and I had to refresh the page to get it in its actual shape. Any help would be highly appreciated.

The text was updated successfully, but these errors were encountered:

I assume you are calling next() when the websocket updates the table? If so, you must destroy the table first before calling next(). Also try draw() on the dt instance instead to redraw after updating the data. I had to use setTimeout though to let angular update the DOM first then call draw()

@ljmerza thanks for your reply. I’m not calling any next() or draw() method at any place. This is what I actually do when receive notification:

And you can see in the HTML code given above in the question that I’m showing the same list (in which I’m pushing an element after receiving notification) with ng-repeat in HTML file. Please let me know If I’m missing anything which I need to add.

You do need to call rerender when adding items to the array. Sure, Angular updated the DOM but Angular didn’t notify datatables that the DOM updated

Is this the reason that I’m getting Cannot Reinitialise DataTable error?
So, while adding an item to the array upon receiving notifications, I need to run Angular digest cycle to make changes available on the front end by $scope.$apply() and dtInstance.render() to re-render the table?
The table usually gets disappear when the last row in the table is removed that it gets disordered with the error message.

This example should be close to what you want.
It seems the options of the DataTables are changed when you called $scope.apply() . You might want to watch its values.

@ljmerza @l-lin
I tried the following things and nothing seems working till now:

First Thing:
vm.dtInstance.reloadData();
For this, I just get the warning message on the browser’s console and nothing happens:

The Angular Renderer does not support reloading data. You need to do it directly on your model

Second Thing:
vm.dtInstance.rerender();
After using this option, Datatable just keep showing Loading. hiding whole datatable.

Third Thing:
vm.dtInstance.DataTable.draw();
This doesn’t give any error or warning but this doesn’t seem to make any difference. To verify this option, I tried to apply search and re-draw table that if it still shows the filtered row or not but still all the data is being shown:
vm.dtInstance.DataTable.search(«search_string»).draw();

So, with all the options tried so far, I’m getting an error that when I add/remove data randomly based upon the async notification on web socket, sometimes table gets disordered and all the data gets disappears.

@ljmerza @l-lin
Can you please respond on this? This is really annoying.

I dig into this further and found some more information related to issues being faced. Whenever I try to add/remove rows quickly (by adding data into the list bonded with table) or I add 2 rows then datatable gets disappear completely.

If there are a lot of issues then why unstable things are released or documentation isn’t that much matured?

I seem to have a very similar problem to this one (angular-datatables version 0.6.2)

@vinodf recomended a fix in his post here: #262 (comment) which helped to fix mine problem.

Could you give it a try?

If it helps we could perhaps try to persuade @l-lin to fix it in the code base.

Unfortunately, this fix solves some issues, but it also bring regression to other functionnalities, such as changing the data with the angular renderer.

Hi Luis, yes you are right.

Please have a look at the second version of the fix:

Probably not an ideal fix, but it works. In particular I was wondering what is the purpose of the _alreadyRendered variable and if it has anything to do with the problem.

Anyway, to the cause of the problem: it manifests when there is more than one successive change to the datatable’s data (e.g. resizing the collection twice).

Normally a change to the datatable’s data trigger the _parentScope.$watchCollection(. ) callback function. The callback function destroys the table and schedules an another callback via $timeout() which in turn creates the underlying datatable. Seems fine.

What I mean by «_parentScope.$watchCollection(. ) callback function» is this.
And I mean by «$timeout() callback function» is this.

The code directly:

Now, let’s assume we have two successive changes to the size of the data.

The way the _parentScope.$watchCollection(. ) callback function is written expects that the $timeout() callback function will be executed rather SOON after the execution of the _parentScope.$watchCollection(. ) callback stops. Something like this:

_parentScope.$watchCollection(. ) callback (change 1)
$timeout() callback (change 1)
_parentScope.$watchCollection(. ) callback (change 2)
$timeout() callback (change 2)

Howewer, this order is NOT guaranteed and depends on many circumstances, so the execution order may look like this:

_parentScope.$watchCollection(. ) callback (change 1)
_parentScope.$watchCollection(. ) callback (change 2)
$timeout() callback (change 1)
$timeout() callback (change 2)

Which causes the underlying datatable to be initialized twice — and it complains.

Источник

jQuery DataTable is very user-friendly & provides a lot features and is easier to use. But when we use jQuery DataTable, we face a unique type of alert message (Cannot reinitialize JQuery DataTable).

These DataTables show the data in listing at front-end and in an good user friendly manner. It also provides features to use like sorting, searching, paging, and export to different types of file and print.

This is actually a warning message shown by jQuery DataTable. At initial level, an user can not understand this warning. So In consideration of this issue, I am writing this article.

Meaning:

This warning means that we can not initialize a jQuery DataTable more than once and we can not change it’s configuration options after initialization once. If we want to set any option after initialization, then we have to use it’s API Otherwise it will give us this type of warning. Just see this below given code :

Here we are using jQuery Datatable constructor instance 2 times for the same element for setting 2 different options and this will result with the warning.

Some tips, trick and fixes to efficiently use jQuery Colorbox or Fancybox.

4 ways to fix – Cannot reinitialize jQuery DataTable

There are number of ways to resolve this issue. I am listing out four ways to resolve the warning.

1. Single initialisation

We should set jQuery DataTable configuration options by using only one instance. In the case of the above example, we should initialize like this :

2. Object instance retrieval

In this option, we can retrieve the object instance of already initialized jQuery DataTable. In this case we will use $.fn.dataTable.isDataTable() method. This can be used to check if a table is a DataTable or not already.

3. Retrieve the Instance

jQuery DataTable provide this option in it’s configuration. Which provides a short-cut way to explicit check using $.fn.dataTable.isDataTable() as above when obtaining a DataTable instance:

Means using this option, If any old DataTable instance exists then It will retrieve that instance instead of giving error.

4. Destroy existing instance

By destroying existing instance also, we can resolve this issue. This can be done by 2 ways:

There is also a destroy option that can be used to destroy old DataTable

Like this, we can destroy the old table on existence and then create new instance of jQuery DataTable:

These above all are 4 ways to fix warning, Cannot reinitialize jQuery DataTable. If you know other ways to fix the same, don’t miss to comment.