jquery datatable显示没有可用的数据在表格后列表行数（javascript）

Question

我想显示表（Jquery DataTable）的数据女巫我创建从JavaScript 但一些如何显示这样的表。

Jquery DataTable正常显示，但如果我这样做搜索则显示通知No data available in table 就算我右键单击页面和View Page Source新行不显示其功能甚至没有工作。 我不没有什么问题听我把初始化数据表的代码，

$(document).ready(function() { 
    $('#example').dataTable({ 
     "sPaginationType" : "full_numbers" 
    }); 
}); 

在表中插入行代码

$("#example").find("tr:not(:first)").remove(); 

for (var i = 0; i < response.userListReturns.length; i++) { 
    var table = document.getElementById("example"); 
    var thisRowCount = table.rows.length;     
    var row = table.insertRow(thisRowCount); 

    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= response.userListReturns[i].userName; 

    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= response.userListReturns[i].userAddress; 

    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= response.userListReturns[i].userPhoneNo; 

    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= response.userListReturns[i].education; 

    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= response.userListReturns[i].userLiginName; 

    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= '********'; 
} 

Answer 1

看来你是手动添加的行我不确定这将与数据表适合。我建议你读那里的API，如果你坚持做这种方式，您可以使用fnAddData，直接从使用情况看喜欢的网站：

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

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

giCount++; 

}

，则仍可通过CSS样式表。

Answer 2

尝试刷新使用​​

Answer 3

使用fnClickAddRow表，作为@Shawn建议，就是做它的正确方法。不过，我想这需要在代码中对som进行重大更改，实际上它并不是秘密。

你的代码的主要问题是，由于某种原因，table.insertRow()插入行<thead>，而不是<tbody>。 Datatables 要求一个<thead>部分，并且只能处理一个<tbody>-部分。

解决方法是在代码中创建<tbody>，并使用tbody.insertRow而不是table.insertRow。

二，一定要初始化数据表后全部插入数据。在下面的例子中，当计数器i达到最大值时，我会调用一个函数，但是您可能希望以其他方式执行此操作。

以下代码有效，例如，数据由原生javascript插入到上面的循环中，生成的数据表支持排序，计数等操作。

测试表，注意无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> 

脚本，几乎和上面的循环一样，除了我正在处理tbody变量而不是表格。提示：使用insertRow(-1)代替thisRowCount等，更容易和做同样的

<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> 

这导致功能数据表中没有错误或警告：

PS：猜猜response.userListReturns[i].userLiginName是一个错字？ ？