Problem with multiple tables in one page

JochenK

Link to test case:
https://live.datatables.net/himupozu/1/edit

Since updating to the latest Datatable version, several datatables in one page no longer work.
I tried to change this according to the example in "Default styling options", but without success.

What can I do ?

kthorngren

I'm not sure what this code is so I commented it out:

<script class="init">
   dt_demo.init();

Now the test case has these two errors:

Uncaught TypeError: $.fn.dataTable.moment is not a function
at iNetScripts.js:59:19

You will need to look at iNetScripts.js to debug this.

jquery-3.7.1.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'cell')

You have this buttons definition:

               buttons: [ 
                  { extend: 'colvis',
                    text: 'Spaltenauswahl',
                    collectionLayout: 'fixed columns',
                    collectionTitle: '<strong>(ent) markieren Sie die Spalten </strong>',
                    columns: [2,3,4,5,6,7,8,9,10],
                    postfixButtons: ['colvisRestore']
                  }
              ]

The columns defined is for a table with 11 columns (0-10) but both tables have only 8 columns. Change to columns: [2,3,4,5,6,7], and it will work:
https://live.datatables.net/himupozu/3/edit

Kevin

JochenK

"dt_demo.init();" I also took the text from the example "Default styling options".

The colvis Button i have now deleted.
Everything looks much better now, thank you.

https://live.datatables.net/xugojaxo/1/edit

But there are differences between the two tables.
The headlines has different heights
The second has no border-cells

Is this a matter that can be solved with datatables?

kthorngren

The headlines has different heights

Not sure what you mean by headline. Are you referring to the accordion div? If yes then it seems the amount of text is causing wrapping and the height difference. This is not a Datatables element so you will need to apply custom styling to control the heights.

The second has no border-cells

Compare the two table tags. The first you have the Bootstrap calls cell-border and the second you don't. Add that class to the second table tag.

Kevin

JochenK

Thanks for your hint.

It was my mistake that I overlooked the differences in the lines.
I have now set the lines "<table class="demo ... " as they should be.

Many thanks for your support.