Warning: Cannot Reinitialise

IMTanuki

environment:
- bootstrap 5.0.1
- jquery 3.6.0
- dt src downloaded consolidated DT css and js files.

test case:
https://vtcc-cis-1151-webdev-02.easternwind.asia/site/custom/pages/xmd-pag-00-sandbox.html

issue
I'm afraid this might be fallout from the previous issue of adding dom elements to integrate with bootstrap...I'm getting the Warning: Cannot Reinitialise error.

**previous config changes **
- added a custom control to select num of recs to show
- add event listeners to change page.len

status
All was working fine until I upgraded my build scripts to use rollup and exported my datatables functions. Rollup created the following factory in dist:

(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
    typeof define === 'function' && define.amd ? define('xmdInitOtherCompTable', ['exports'], factory) :
    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.xmdInitOtherCompTable = {}));
}(this, (function (exports) { 'use strict';

question
Based on the dt article here, it looks like the event handlers for my dom mod are triggering the error, since they change page.len based on the user-selected num recs.

But if that's the problem, not sure why it's been working so far - the only changes are the above-mentioned factory code and the export directive.

Any thoughts on this?

Thx in advance!

dom
// controls - dom dom: "<'row'<'d-none d-md-flex justify-content-between pb-0' <\"control-group-02-table-01-pagelen\">f>>" + "<'row'<'d-flex d-md-none justify-content-between pb-0' <\"control-group-02-table-01-pagelen\">f>>" + "<'row'<'col-sm-12'tr>>" + "<'row'<'d-none d-lg-flex justify-content-between pt-2'ip>>" + "<'row'<'d-flex d-lg-none justify-content-center pt-1'i>>" + "<'row'<'d-flex d-lg-none justify-content-center pt-1'p>>" + "<'row'<'d-none d-lg-flex justify-content-end pt-2'B>>" + "<'row'<'d-flex d-lg-none justify-content-center pt-2'B>>",

custom element

$ ( "div.control-group-sample-data-table-01-paglen" ).html ( 
'<div class="dropdown"> ' +

   '<button id="table-sandbox…"  
class="btn btn-primary dropdown-toggle" 
type="button"  
data-bs-toggle="dropdown" >Items / Page </button> ' +

   '<ul class="dropdown-menu" > ' +

   '<li id="table-sandbox-pagelen-01" class="dropdown-item" >10</li>' +

   '<li id="table-sandbox-pagelen-02" class="dropdown-item" >25</li>' +

   '<li id="table-sandbox-pagelen-03" class="dropdown-item" >50</li>' +

   '<li id="table-sandbox-pagelen-04" class="dropdown-item" >All</li>' +

   '</ul></div>' );

event handler

// custom control event listeners - table-sandbox-02
document.querySelector ( '#table-sandbox-group-02-table-01-pagelen-01' ).addEventListener ( "click", function ( e ) {
tableSandboxGroup02Table01.**page.len ( 10 ).draw ();** <-- is this the problem?
} );

colin

No, the problem is that you're initialising the table twice. You're doing it in a function xmdInitComponentsTablesSandboxGroupSampleDataTable01(), which is called twice at the end of xmd-main.js,

Colin

IMTanuki

That's what I get for jamming thru an install of a new bundler and converting to a module structure in one fell swoop...

Many thanks for the call out - I never thought of looking for a typo in the main.js - should have been 2 different function names...:>(

Cheers!