Can't apply changes to multiple Datatables

Lara8

Hello Community! I'm discovering this amazing tool, and I'm struggling for days to make my code work, I would like to have multiple data tables in the same web page, but my code display perfectly the first table, and don't apply the "columnDefs" changes to the others, here is my function:

if ( $.fn.dataTable.isDataTable( '.example' ) ) {
    table = $('.example').DataTable();
     }
    else {
    table = $('.example').DataTable( {
        "columnDefs": [ {"className": "dt-left", "targets": "_all"}  ]
    } );
    }

I can't afford a complete test case, but I do really need your help, Thank you in advance.

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I built a test case for you:
http://live.datatables.net/rihugola/1/edit

Using the browser's inspection tool I can see that the dt-left class is applied to all tables. For example:

<td class="dt-left sorting_1">Ashton Cox</td>

Please update the test case or provide a new one to replicate your issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Lara8

Thank you @kthorngren for the quick answer, It was a silly error, I missed a }.
Know it works fine, my tables are all rendered. However, when I use the same function to include a data table inside a Tab, the page numbers and the Search box disappear, I inspected my page and the result is as follow:

Should I upload css and js files into my project, because I'm using just the direct links now?

kthorngren

That error indicates that datatables.js isn't loaded on that page. Depending on your requirements you should be able to use CDN links or load directly from the server. Make sure that the datatables.js and datatables.css are being loaded.

Kevin

Lara8

Exactly, I'm wondering why it works on the page with multiple datatables and it does not for this case,using the same function!
I'm using CDN links for both cases :
css = ['https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css']
js_file = {
'$': 'https://code.jquery.com/jquery-3.4.1.slim.min.js',
'DataTable':
'https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js'
}

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Lara8

I appreciate your help, I'm using exactly the same function , css and js links mentioned in this test case : http://live.datatables.net/rihugola/1/edit
the problem appears when I generate an HTML report containing multiple tabs, the ones containing DataTables, could not find js links wiredly, and the output html is this:
http://live.datatables.net/rihugola/5/

kthorngren

As Colin said we will need to see the problem, in a running test case, to help debug.

You keep referring to a page with multiple tabs containing Datatables. Are you loading datatables.js more than once, ie, once for each tab? If so then that is likely the problem. Only load the JS and CSS files once for the whole page.

Kevin

Lara8

No I'm loading the links once in the head of my file, I tried to show you my output but It's a local HTML file, the msg tab doesn't support this kind of files, and it's too big to be shown in HTML console

kthorngren

Sorry but its impossible to troubleshoot something like this without actually seeing it. There are many areas where the problem could be that it would be hard to guess. Could be an ordering issue, could be the files aren't being loaded, etc.

Can you replicate the issue in a test case?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Lara8

I know that you need a concreate test case, I tried to do so but nothing seem to work:

my file is too large
in all cases thank you, I will try to figure out the problem

kthorngren

The best thing to do is to reduce the code down to replicate the issue. The test case doesn't need to be the full solution. Sometimes this process can highlight the problem for you. If you are unable to build a test case for us maybe you can build up your page piece by piece locally to find the problem.

Kevin