Itables fails to display tables in a copy of a notebook when the original notebook is already opened in Jupyter Lab

[mwouts]

This must be related to the use of table ids to identify the tables, which are duplicated by the notebook copy, while the two notebooks are displayed under two tabs in Jupyter Lab, so in the same HTML page.

In the copied notebook, the table remains in the loading state.

In the original notebook, the datatables controls are displayed twice:

[mwouts]

datatables.net has this example of initializing tables based on their class rather than on the id: https://datatables.net/examples/basic_init/multiple_tables.html.

This also works in a Jupyter Notebook (see the example below).

The remaining difficulty is how to associate the data and DataTable arguments to the table. In the below I have passed the rows through a data-data dataset, as a nested array, but I think the documentation says it's supposed to be just a string, so this might not work for arbitrary rows (plus, some of the other dt arguments might have function type, which I doubt I can set on data attributes in HTML).

from IPython.display import HTML


HTML("""
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.1/css/jquery.dataTables.min.css">
<table class="itables" data-data=[[1]]><thead><tr><th>A</th></tr></thead></table>
<script type="module">
    // Import jquery and DataTable
    import 'https://code.jquery.com/jquery-3.6.0.min.js';
    import dt from 'https://cdn.datatables.net/1.12.1/js/jquery.dataTables.mjs';
    dt($);

    $(document).ready(function () {
        document.querySelectorAll("table.itables").forEach(table=> {
                if (!table.className.includes('dataTable')) {
                    let dt_args = table.data;
                    new $.fn.dataTable(table, dt_args)
                }
            }
        );
    });
</script>
""")