Call another datatable except default datatable

Question

i got Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined .

The problem is, i have default table.

$("#mainFolder").dataTable();

In my project, the Default Table is much of Data.

In this case, i want adding New table.

i use $(".tab-content table").dataTable(); for making the New table have 'DataTable View' .

but, it's will display the default table without the 'DataTable View' when first displaying the page.

When im using $("#mainFolder").dataTable(); and i calling dataTable() on all tables in tab-content container after the for loop:

for (var i = 0; i < resultTable.length; i++) {
    var items = resultTable[i];
    $(".tab-content").append(items.table);
}

$(".tab-content table").dataTable();

I will get Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined .

How to both them without get Uncaught TypeError: Cannot set property '_DT_CellIndex' of undefined . ?

JSFiddle Demo 1

JSFiddle Demo 2

By, "In my project, the Default Table is much of Data.", do you mean that the data table is too big? That it contains so much data that it is unable to function? Is it that you have too much data to view at once? — erik258
– erik258, Commented Dec 8, 2017 at 2:20
So you don't argue, because I get a lot of tables. And I differentiate the default table with other tables but in 1 parent div. — Calvin Ananda
– Calvin Ananda, Commented Dec 8, 2017 at 3:59
In order for you to understand if in my project, the default table is not empty. because maybe you will also assume "Why the default table with other tables do not use 1 datatable command because the same using empty table?". — Calvin Ananda
– Calvin Ananda, Commented Dec 8, 2017 at 4:04

Bumptious Q Bangwhistle · Accepted Answer · 2017-12-14 11:03:13Z

1

+50

This problem is discussed here: https://datatables.net/forums/discussion/32575/uncaught-typeerror-cannot-set-property-dt-cellindex-of-undefined

In a dataTable that has 0 entries, but has a column with no title or a title of just ( ). (For example a column for action buttons that has no title), this causes a JS error like in original report.

This issue is immediately resolved once the amount of rows in table is greater than 0.

Your first header column is empty, <th></th>. Try putting in a non-breaking space <th> </th> or a single character, like <th>*</th>, and see if that fixes it.

Also, the very first time it runs, you are not calling .dataTable on the table. You try to load localStorage with this line:

var resultTable = JSON.parse(localStorage.getItem("tableList"));

This results in null, so the else is executed:

} else {
  let inititalTable = [];
  inititalTable.push({
    table: $('div.tab-content').html()
  });
  localStorage.setItem("tableList", JSON.stringify(inititalTable));
}

This adds your table html to localStorage. But it does not call .dataTable on the table.

To this else code you could add $(".tab-content table").dataTable();. Or you could move that out of the if altogether, and place it at the bottom:

var resultTable = JSON.parse(localStorage.getItem("tableList"));
if (resultTable != null) {
  //get the nav reference in DOM
  let tableContent = $(".tab-content");

  //clear the html contents
  tableContent.html('');

  for (var i = 0; i < resultTable.length; i++) {
    var items = resultTable[i];
    $(".tab-content").append(items.table);
  }
 // Moved to end $(".tab-content table").dataTable();

} else {
  let inititalTable = [];
  inititalTable.push({
    table: $('div.tab-content').html()
  });
  localStorage.setItem("tableList", JSON.stringify(inititalTable));
}

  $(".tab-content table").dataTable();

edited Dec 14, 2017 at 11:03

answered Dec 14, 2017 at 10:53

Bumptious Q Bangwhistle

4,7692 gold badges36 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Calvin Ananda Over a year ago

Did you see when page reloaded? the new table not display 'datatable view'.

Bumptious Q Bangwhistle Over a year ago

It does for me. Which brings us to another issue: wrap your initialisation code with $(document).ready(function(){ [init code here]}); See this fiddle: jsfiddle.net/ac8mjehn/2

Bumptious Q Bangwhistle Over a year ago

Please try this: jsfiddle.net/ac8mjehn/17 You should clear your local storage as I added another class ("dynamicTable") to the table and any that are stored locally won't have that class.

Calvin Ananda Over a year ago

it's brilliant. I just understood something like this. new knowledge for me. update your answer. thankyou.

Collectives™ on Stack Overflow

Call another datatable except default datatable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related