2

我正在尝试显示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= '********';
}
4

3 回答 3

8

看来您正在手动添加行，我不确定这是否适用于数据表。我建议你阅读那里的 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 设置表格样式。

于 2013-08-02T07:20:29.923 回答
3

正如@ShawnfnClickAddRow所建议的那样，使用 是正确的方法。但是，我想它需要对您的代码进行一些重大更改，实际上这不是必需的。

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

解决方法是也创建<tbody>in 代码，并使用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)代替thisRowCountetc，它更容易并且做同样的事情

<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是错字？？

于 2013-08-02T11:45:37.237 回答
0

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

于 2013-08-02T10:06:11.540 回答