jquery数据表显示创建表行运行时后表中没有可用数据（javascript）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18010818/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jquery datatable display No data available in table after creting table Row runtime(javascript)
提问by Youddh
i am trying to display table(Jquery DataTable) of data witch i created from JavaScriptbut some how the table is display like this .
我正在尝试显示Jquery DataTable我创建的数据表（），JavaScript但有些表是如何显示的。
Jquery DataTableProperly display but the functionality is not working even if i do search then it display notification No data available in tableEven if i do right click in page and View Page Sourcethe new Row is not display their.
I don't no what is the problem hear i put the code of initialization for data table ,
Jquery DataTable正确显示，但即使我进行搜索，该功能也不起作用，然后它显示通知 No data available in table即使我在页面中右键单击并且View Page Source新行不显示它们。我不知道有什么问题听到我把初始化数据表的代码，
$(document).ready(function() {
$('#example').dataTable({
"sPaginationType" : "full_numbers"
});
});
code for insert row in table
在表中插入行的代码
$("#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= '********';
}
回答by Shawn
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:
看来您正在手动添加行，我不确定这是否适用于数据表。我建议你阅读那里的 api，如果你坚持这样做，你可以直接从站点使用 fnAddData，用法如下：
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.
然后，您仍然可以通过 css 设置表格的样式。
回答by davidkonrad
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.
使用fnClickAddRow，如@Shawn建议，就是做它的正确方法。但是，我想它需要对您的代码进行一些重大更改，实际上它并不是必需的。
The main problem with your code is that for some reason table.insertRow()inserts the row in <thead>, not <tbody>. Datatables requiresa <thead>section and can only handle one<tbody>-section.
与您的代码的主要问题是，由于某种原因table.insertRow()插入在行<thead>，不是<tbody>。数据表需要一个<thead>节并且只能处理一个<tbody>节。
The workaround is to create the <tbody>in code as well, and use tbody.insertRowinstead of table.insertRow.
解决方法是建立<tbody>在代码好，用tbody.insertRow代替table.insertRow。
Second, be sure to initialize the datatable afteralldata is inserted. In the example below I call a function when the counter ihas reached it's max, but you may want to do it in some other way.
其次，一定要在所有数据插入后初始化数据表。在下面的示例中，我在计数器i达到最大值时调用一个函数，但您可能希望以其他方式执行此操作。
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.
下面的代码可以工作，例如数据是由原生javascript在循环中插入的，生成的数据表支持排序、计数等。
Test table, note without tbody!
测试表，注意没有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 thisRowCountetc, it is easier and does the same
脚本，几乎就像上面的循环一样，除了我处理的是 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>
This results in a functional datatable without errors or warnings:
这会产生一个没有错误或警告的功能数据表：
PS : Guess response.userListReturns[i].userLiginNameis a typo??
PS：猜错response.userListReturns[i].userLiginName了？？
回答by Salman
Try refreshing the table using $('#example').dataTable().fnDraw();
尝试使用刷新表 $('#example').dataTable().fnDraw();
