DataTable reinitialisation Error
DataTable reinitialisation Error

Link to test case:
using the function below, and autompg dataset:
result = pn.Column(build_dataframe_html_pane(autompg),
build_dataframe_html_pane(autompg))
result.show()
Error messages shown:
Description of problem:
I'm using the function below to generate multiple DataTables and display them all as a pane object in the same web page, I faced the problem of DATATABLE reinitialisation, https://datatables.net/manual/tech-notes/3:
`
import panel as pn
from bokeh.resources import INLINE
from bokeh.sampledata.autompg import autompg
def build_dataframe_html_pane(dtf):
css = ['https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css']
js_file = {
'$': 'https://code.jquery.com/jquery-3.4.1.slim.min.js',
'DataTable':
'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js'
}
pn.extension(css_files=css, js_files=js_file)
script = """
<script>
if (document.readyState === "complete") {
$('.example').DataTable({
"columnDefs": [
{"className": "dt-left", "targets": "_all"}
]
});
} else {
$(document).ready(function () {
$('.example').DataTable({
"columnDefs": [ {"className": "dt-left", "targets": "_all"} ]
});
})
}
</script>
"""
html = dtf.to_html(classes=['example', 'panel-df'])
return pn.pane.HTML(html + script, sizing_mode='stretch_width')`
I tried to apply instructions in this link : https://datatables.net/manual/tech-notes/3, but noting seem to work!
I would like to display all my tables in the same page, how can I avoid this warnings please
Answers
Instead of reinitializing the data table you can either
- ckeck your code whether you are repeatedly running the dt initialization code, or
- (if it can't be avoided) use "retrieve" https://datatables.net/reference/option/retrieve
thanks for your answer @rf1234, I don't know how to avoid initialization since I'm calling the same function with different data frames to display multiple data tables on the same web page. I tried out the "retrieve" option and the output is simple tables without icons, slides, search and show, widgets ...
Then you would need to use the “destroy“ method which is also available.
I already do but it shows the same output (simple tables without any other widgets), still having the same problem
Are you seeing errors in the browser's console?
If you need help please post a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
No there is no error in my console, I posted below the function I'm using and this is my output HTML file( analysis_report.html)
here is a screenshot of the error:

Thanks for posting your code but there is a lot there and its not easy to find the Datatables specific code. Is it possible to link to your page or build a simple test case showing the problem?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Debugging what you posted will be very difficult and likely won't happen.
However I did see that you are loading the datatables.css multiple times:
You should load it only once.
Kevin
I don't know how to afford a test case describing my issue because my problem is basically the call of the function that builds DataTable multiple time, I removed the CSS and js links from the function but the problem persists
This solves my problem: https://stackoverflow.com/questions/13708781/datatables-warningtable-id-example-cannot-reinitialise-data-table
I think Kevin's point is that we need to be able to see the code running (either on your page, or on a test case such as JSBin / http://live.datatables.net) so we can understand why the function is being called multiple times.
Allan