Styling issue with two datatables.

angmendosal

Hello All,

I'm experiencing a very weird issue with datatables when using two of them, issue is the following one:

I have these definitions:

(function($){
$(document).ready(function() {

$("#example").DataTable( {
        "columns": [
            null,
            {className: "number"},
            {className: "number"},
            null,
            null,
            null,
            null,
            {visible: false},               
            {visible: false}
        ],
        "order": [[ 6, "desc" ]],
        "language": {
            "search": "",
            "searchPlaceholder": "Search this list"
        },
        "dom": '<"toolbar">frtip'
    } );

$('#example3').DataTable( {
        "columns": [
            null,
            {className: "number"},
            {className: "number"},
            null,
            null,
            null,
            null,
            {visible: false},               
            {visible: false}
        ],
        "order": [[ 6, "desc" ]],
        "language": {
            "search": "",
            "searchPlaceholder": "Search this list"
        },
        "dom": '<"toolbar">frtip'
    } );

For tables:

<

table id="example" class="display table table-striped" cellspacing="0" width="100%">

and

<

table id="example3" class="display table table-striped" cellspacing="0" width="100%">

The problem I'm experiencing is that the css class is not being applied to the "example3" table at all, which is weird because if I remove the first table and rename "example3" into "example" it magically works. Same issue happens if I change "example" into "example1" or anything else, styling just goes away.

Are the stylesheets somehow linked to the table ids (specifically "example")? This is very weird because it seems to be working only when there is one table and it has "example" as the id. Everything else is working, I can search and sort and I see the data on both tables perfectly, it is just that styling issue.

Any help would be extremely appreciated.

angmendosal

Help would be really appreciated.

tangerine

If that is your complete js, I suspect it's not valid. I don't see your document.ready.function getting closed. Are you seeing any errors reported
in your console?

Unrelated, you might find this tip useful when applying the same initialisation options to more than one table:
https://datatables.net/beta/1.9/examples/advanced_init/defaults.html

angmendosal

Thank You. I will review it.
As for the function, it is being closed, as I mentioned, the only issue is that if I use table id as "example" it works, if I change it to anything else, it just does not take the styling anymore, and I don't have an idea of why could this be happening.

angmendosal

Anyone else? Any further help would be awesome. Thanks.

kthorngren

More info is needed to help. You may want to post your code so it can be looked at. This will provide the steps:
https://datatables.net/manual/tech-notes/10

Kevin