How to use DataTable() to multiple tables with not the same columns on one page?

How to use DataTable() to multiple tables with not the same columns on one page?

IvanSinIvanSin Posts: 3Questions: 1Answers: 0

Hi everyone!
Sorry for my language
I have an issue with adding 3 tables on one page
First table have 7 columns, and 2,3 - have 2 columns
Also I add 2 and 3 tables dynamically
I have error: Uncaught TypeError: Cannot read property 'mData' of undefined, and I think it's because of not the same columns in tables
I've already read this - https://datatables.net/examples/basic_init/multiple_tables.html
I've trying to use id="exampleTable" to all tables, and trying to use two DataTable with id="parentTable" and id="childTable":

$(document).ready( function () {
var table = $('#parentTable').DataTable( {
});

$(document).ready( function () {
var table = $('#childTable').DataTable( {
});

So, am I wasting time and this is not impossible to have multiple different tables on one page with DataTable?

Thanks for help :smile:

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,112Questions: 1Answers: 2,583
    edited December 2019

    You can have as many tables on a page as you like.

    I've trying to use id="exampleTable" to all tables

    This would be a problem - id's should be unique in the DOM. A better way would be to call:

    $(document).ready( function () {
        var tables = $('table').DataTable();
    });
    

    Colin

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394

    ...and you can't assign multiple tables to the same variable name:

    var table = $('#parentTable').DataTable( {
    var table = $('#childTable').DataTable( {

  • IvanSinIvanSin Posts: 3Questions: 1Answers: 0

    Thanks for your reply, Colin.

    But can you explain how I should declare my tables to use in DataTable?
    For example 3 my tables:
    table 1:
    <table class="table" id="table1">
    table 2:
    <table class="table" id="childTable1">
    table 3:
    <table class="table" id="childTable2">

    And then i use

    $(document).ready( function () {
           $('table').DataTable( {
    }); 
    

    ?

  • kthorngrenkthorngren Posts: 20,142Questions: 26Answers: 4,736
    Answer ✓

    Here is an example with 3 Datatables. One with 6 columns and tow with 2 columns.
    http://live.datatables.net/bivumuru/1/edit

    Uncaught TypeError: Cannot read property 'mData' of undefined

    Here is another thread with the same error:
    https://datatables.net/forums/discussion/comment/159640/#Comment_159640

    Sounds like one or more tables were not meeting HTML requirements. In order fo us to help we will need to see a link to your page or a test case replicating the issue so we can see your HTML tables.

    Kevin

  • IvanSinIvanSin Posts: 3Questions: 1Answers: 0

    Thanks you, Kevin, for your reply.

    I found that I missed 2 tags:

    <thead></thead>
    and
    <tbody></tbody>

    I used <tr> <th>... </tr>
    and
    <tr> <td> ... </tr> without <thread> and <body>
    Now its work fine

    Thanks again :smile:

This discussion has been closed.