Multiple tables on one page - DataTable initializes columns on the first encountered tag.

phikret

As said in the title: I have one page with two tables. Both tables have their own ids (unique) and are dynamically filled with the data (after ajax call). I am attaching the files.

The problem: When I initialize one table, the problem does not exist. When I initialize two tables, the first table ("myTable") gets rendered fine, but for the second table, DataTable adds thead with the corresponding tr and td's to the first table ("myTable"), eventhough I instructed DataTable to refer to the secon table ("mySecondTable"). Even more, the data gets properly added to the right table - "mySecondTable", but since its thead is added to the first table, it does not behave as it should (I get two separate scrolls for the second table - one for thead, and second for tbody). Please see "Capture.PNG" attached.

Index.html

<div class="table-responsive">
      <table id="myTable" class="table table-striped">
           <thead id="thead">

           </thead>
      </table>
</div>
<div class="table-responsive">
       <table id="mySecondTable" class="table table-striped">
            <thead id="thead">

            </thead>
      </table>
 </div>

Script that is to initialize two tables and render them is given below:

<script>

    //Go to the database and retrieve column names for the table. Assigns it to the columns array, then provide this array to the DataTable init function.
    //E.g.
    function initDataTable(_param, _tableId) {

       $.ajax({
            url: "home/columns",
            contentType: "application/json",
            method: "GET",
            data: { tblName: _param },
            success: function (response) {
                var columns = [];
                var myTable = document.getElementById(_tableId);
                var myTableThead = document.getElementById("thead");
                var myTableTr = document.createElement("tr");
                myTableTr.setAttribute("id","tr")
                myTableThead.appendChild(myTableTr);

                $.each(response, function (key, value) {

                    var textNode = document.createTextNode(value);
                    var node = document.createElement("th");
                    node.appendChild(textNode);
                    myTableTr.appendChild(node);
                    columns.push({ "data": value });
                });

                var temp = "#" + _tableId;
                $(temp).DataTable({
                        "ajax": "home/TableData?tblName=" + _param,
                        "dataSrc": "",
                        "columns": columns
                   });
              },
            error: function (err) {
           }
        });
    }
    
    $('document').ready(function () {
       initDataTable("DimCustomer", "myTable");
       initDataTable("DimProduct", "mySecondTable");
    });

</script>

Notes: Ajax call to 'home/columns' returns columns for the table in the database. Then, DataTable initialization call returns data for the datatable.

When the page is loaded, I get all the columns rendered for both tables, but from some reason, DataTable library always reffers to the first table in the dom (in my example "myTable") when generating columns. Later (during initialization), data are added to the right table ("mySecondTable"), but no thead (it was by mistake added to the first table "myTable"). Is there a way to overcome this situation?

phikret

Hello everybody, I have just found where the problem lays. It was my fault, not the librarie's . I was accidentally referring to the same "thead" through my javascript file. In particular this line was making trouble

var myTableThead = document.getElementById("thead");

I replaced it with

var myTableThead = myTable.firstElementChild;

I must have been very tired! I wanted to share the solution with others. Best regards!