Question

我正在尝试显示从Jquery DataTable创建的数据表（JavaScript）但是有些桌子是如何显示的那样。

enter image description here
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

正如@Shawn建议的那样，使用fnClickAddRow是正确的方法。但是，我想它需要在您的代码中进行重大更改，事实上它并不是必需的。

您的代码的主要问题是，由于某种原因，table.insertRow()会在<thead>中插入行，而不是<tbody>。数据表需要 <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-variable而不是table。提示：使用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是一个错字？

Answer 3

尝试使用$('#example').dataTable().fnDraw();

刷新表格

jquery datatable display创建表之后表中没有可用的数据行运行时（javascript）

3 个答案: