DataTable reinitalisation error

ag926u

Hello!

I am trying to create an app that displays an option to search and make selections from 3 data tables, which are displayed on 3 different tabs, such as shown below:

I am getting reinialisation errors when I try to load the page, and I'm not sure why. My debugger code is ucuxur and the code I am using is as follows:

var _datatables = [];

formatTable();


        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

            _datatables.forEach(function (datatable) {
                datatable.columns.adjust();
            });

        });

        function formatTable() {

            $('.dt').each(function () {

                var datatable;
                datatable = $(this).DataTable({
                    dom: '<"pull-left"f><"pull-right"l>tip',
                    scrollY: "400px",
                    scrollX: "100%",
                    paging: false,
                    bInfo: false,
                    searching: true,
                    order: [[0, "asc"]],
                    bRetrieve: true
                });

                datatable.columns.adjust();
                _datatables.push(datatable)
            });



        }

kthorngren

Looks like all three tables are the same config. Instead of the loop, which I think might be causing the reinit errors, try the method used in this example:
https://datatables.net/examples/basic_init/multiple_tables.html

Kevin

ag926u

Thanks Kevin! If I switch it to .ready() the initialisation error goes away but my searching and scrolling formats disappear. Any idea how to fix that?

kthorngren

Hard to say, not sure what you did. All I expected was for you to do something like this:

        function formatTable() {

                $('.dt').DataTable({
                    dom: '<"pull-left"f><"pull-right"l>tip',
                    scrollY: "400px",
                    scrollX: "100%",
                    paging: false,
                    bInfo: false,
                    searching: true,
                    order: [[0, "asc"]],
                    bRetrieve: true
                });
 
                datatable.columns.adjust();
                _datatables.push(datatable)
            });

Are you using _datatables for anything but this code? Have a look at tables().

 
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
 
            _datatables.forEach(function (datatable) {
                datatable.columns.adjust();
            });
 
        });

The above code will readjust the columns for all your tables. Not very efficient. THis example show how to use columns.adjust() with just the visible table.
https://datatables.net/examples/api/tabs_and_scrolling.html

You will probably want to replace lines 14-15 in the first snippet:

                datatable.columns.adjust();
                _datatables.push(datatable)

With $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust(); from the example.

Kevin

ag926u

Thanks Kevin! This is my altered code, but I'm still getting the same reinitalisation error. Any thoughts?

formatTable();

        function formatTable() {

            $('.dt').DataTable({
                    dom: '<"pull-left"f><"pull-right"l>tip',
                    scrollY: "400px",
                    scrollX: "100%",
                    width: "100%",
                    paging: false,
                    bInfo: false,
                    searching: true,
                    order: [[0, "asc"]],
                    bRetrieve: true
                });

                $('.dt').DataTable.tables( {visible: true, api: true} ).columns.adjust();

        }

kthorngren

Are you calling formatTable() more than once?

Can you post a link to your page or a test case so we can take a look?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin