jquery datatable display No data available in table after creting table Row runtime(javascript)

Question

i am trying to display table(Jquery DataTable) of data witch i created from JavaScript but some how the table is display like this .

Answer 1

Using fnClickAddRow, as @Shawn suggests, is the proper way to do it. However, I guess it requires som major changes in your code, and in fact it is not nessecary.

The main problem with your code is that for some reason table.insertRow() inserts the row in <thead>, not <tbody>. Datatables requires a <thead> section and can only handle one <tbody>-section.

The workaround is to create the <tbody> in code as well, and use tbody.insertRow instead of table.insertRow.

Second, be sure to initialize the datatable after all data is inserted. In the example below I call a function when the counter i has reached it's max, but you may want to do it in some other way.

The following code works, eg data is inserted by native javascript in a loop as above, and the resulting datatable supports sorting, counting and so on.

Test table, note without tbody!

<table id="example">
<thead>
<th>A</th><th>B</th><th>C</th><th>D</th><th>E</th><th>F</th><th>G</th><th>H</th>
</thead>
</table>

Script, almost as your loop above except I am addressing the tbody-variable instead of table. TIP : Use insertRow(-1) instead of thisRowCount etc, it is easier and does the same

<script type="text/javascript">
//create tbody section by code
var table = document.getElementById("example");
var tbody = document.createElement('tbody');
table.appendChild(tbody);

for (var i = 0; i < 5; i++) {
    var row = tbody.insertRow(-1);

    var cell1 = row.insertCell(0);
    cell1.style.paddingTop = '4px';
     cell1.style.paddingBottom = '4px';
     cell1.style.textAlign = "center";
     if(i%2!=0)
     cell1.style.backgroundColor="#BAD6F7";
     var element0 = document.createElement("input");
     element0.type = "radio";
     element0.id = "chkEditDelet"+i;
     cell1.appendChild(element0);

     var cell2 = row.insertCell(1);   
     cell2.style.paddingTop = '4px';
     cell2.style.paddingBottom = '4px';
     cell2.style.textAlign = "left";
     if(i%2!=0)
     cell2.style.backgroundColor="#BAD6F7";
     cell2.innerHTML= i+1;

     var cell3 = row.insertCell(2);   
     cell3.style.paddingTop = '4px';
     cell3.style.paddingBottom = '4px';
     cell3.style.textAlign = "left";
     if(i%2!=0)
     cell3.style.backgroundColor="#BAD6F7";//c4ffc4
     cell3.style.whiteSpace="nowrap";
     cell3.innerHTML= 'userName'+i;

     var cell4 = row.insertCell(3);   
     cell4.style.paddingTop = '4px';
     cell4.style.paddingBottom = '4px';
     cell4.style.textAlign = "left";
     if(i%2!=0)
     cell4.style.backgroundColor="#BAD6F7";//c4ffc4
     cell4.innerHTML= 'userAddress'+i;

     var cell5 = row.insertCell(4);   
     cell5.style.paddingTop = '4px';
     cell5.style.paddingBottom = '4px';
     cell5.style.textAlign = "left";
     if(i%2!=0)
     cell5.style.backgroundColor="#BAD6F7";//c4ffc4
     cell5.innerHTML= 'userPhoneNo'+i;

     var cell6 = row.insertCell(5);   
     cell6.style.paddingTop = '4px';
     cell6.style.paddingBottom = '4px';
     cell6.style.textAlign = "left";
     if(i%2!=0)
     cell6.style.backgroundColor="#BAD6F7";//c4ffc4
     cell6.innerHTML= 'education'+i;

     var cell7 = row.insertCell(6);   
     cell7.style.paddingTop = '4px';
     cell7.style.paddingBottom = '4px';
     cell7.style.textAlign = "left";
     if(i%2!=0)
     cell7.style.backgroundColor="#BAD6F7";//c4ffc4
     cell7.innerHTML= 'userLiginName??'+i;

     var cell8 = row.insertCell(7);   
     cell8.style.paddingTop = '4px';
     cell8.style.paddingBottom = '4px';
     cell8.style.textAlign = "left";
     if(i%2!=0)
     cell8.style.backgroundColor="#BAD6F7";//c4ffc4
     cell8.innerHTML= '********';

     //HERE you probably want some other logic
      if (i==4) {
        init();
    }
}

//init only when data is inserted to the table
function init() {
    $('#example').dataTable({
        "sPaginationType" : "full_numbers"
    });
}
</script>

This results in a functional datatable without errors or warnings :

PS : Guess response.userListReturns[i].userLiginName is a typo??

Answer 2

It seems you are adding the rows manually and I am not sure that will work well with datatables. I recommend you read there api and if you insist on doing it this way you can use fnAddData, straight from the site the usage looks like:

var giCount = 2;
$(document).ready(function() {
  $('#example').dataTable();
} );

function fnClickAddRow() {
  $('#example').dataTable().fnAddData( [
  giCount+".1",
  giCount+".2",
  giCount+".3",
  giCount+".4" ]
);

giCount++;

}

you can then still style the table through css.

Answer 3

Try refreshing the table using $('#example').dataTable().fnDraw();