columns.adjust().draw()' without getting the Cannot reinitialise DataTabl error?

KBVEX

How do you call .columns.adjust().draw() without getting the Cannot reinitialize DataTable error?

I'm initializing datatables on document.ready. but the headers and columns are not aligned when using scrollX

My thinking was that the adjust() needs to be called outside of that but throws the error. If I place it within document.ready it doesn't do anything?

$(document).ready(function () {

                       var table = $('#logs').DataTable({
                        "scrollX": true,
                        "ordering": false,
                        drawCallback: function () {
                            $('[data-toggle="popover"]').popover();
                        }

                    });

var table = $('#logs').DataTable();
 
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

Thanks!

tangerine

var table = $('#logs').DataTable();

Get rid of that line.

kthorngren

Your code snippet seems to work fine here:
http://live.datatables.net/fesedajo/1/edit

columns.adjust() is generally needed when the Datatable is hidden when initialized. It use called when the table becomes visible. Looks like in your case the Datatable is visible when initialized so calling columns.adjust() is probably not helping.

My guess is you are moving all these lines above $(document).ready()?

var table = $('#logs').DataTable();
  
$('#container').css( 'display', 'block' );
table.columns.adjust().draw();

If so that is why you are getting the error because Datatables is being initialized with var table = $('#logs').DataTable(); then you are executing

                       var table = $('#logs').DataTable({
                        "scrollX": true,
                        "ordering": false,
                        drawCallback: function () {
                            $('[data-toggle="popover"]').popover();
                        }
 
                    });

which is causing the reinitialize error.

I suspect the alignment error is due to a CSS issue. Can you provide a link to your page or update my example with your configuration to show the alignment issue?

Kevin

KBVEX

Here is the table...

                        <table id="logs"
                               class="display nowrap table-striped table-hover table-bordered table color-table dark-table"
                               cellspacing="0" width="100%">
                            <thead>

                            <tr> .... 

Cant provide a link to the page but here is a screencap of the issue.

My table is not initially hidden on load so I guess columns.adjust() is the incorrect approach. I've seen numerous people having this issue and even more "solutions" which none of have worked for me.

Thanks very much for the assistance.

kthorngren

Looks like you might be using Bootstrap?

Can you post your CSS and JS include files. You may have missed one or have a conflict.

This example will show which files to use with Bootstrap 3. You can also use the Download builder to get the proper files.

Kevin