DataTable reinitialisation Error

DataTable reinitialisation Error

OumablkOumablk Posts: 12Questions: 2Answers: 0

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

  • rf1234rf1234 Posts: 2,949Questions: 87Answers: 416

    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

  • OumablkOumablk Posts: 12Questions: 2Answers: 0

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

  • rf1234rf1234 Posts: 2,949Questions: 87Answers: 416

    Then you would need to use the “destroy“ method which is also available.

  • OumablkOumablk Posts: 12Questions: 2Answers: 0

    I already do but it shows the same output (simple tables without any other widgets), still having the same problem

  • kthorngrenkthorngren Posts: 21,172Questions: 26Answers: 4,923

    shows the same output (simple tables without any other widgets)

    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

  • OumablkOumablk Posts: 12Questions: 2Answers: 0
    edited July 2020

    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:

  • kthorngrenkthorngren Posts: 21,172Questions: 26Answers: 4,923

    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:

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

    You should load it only once.

    Kevin

  • OumablkOumablk Posts: 12Questions: 2Answers: 0

    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

  • allanallan Posts: 63,213Questions: 1Answers: 10,415 Site admin

    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

This discussion has been closed.