Question

我通过ajax调用获得了一些预先获取的数据。我想将数据数组附加到数据表。代码如下： -

$("#mnGrTblBdy").empty();
    for(var i= 0; i<maingraphdata['datesrange'].length; i++)
       {
           $("#mnGrTblBdy").append('<tr data-child-value="hidden 1">');
           $("#mnGrTblBdy").append("<td class='details-control'></td>");
            $("#mnGrTblBdy").append("<td >" +maingraphdata['datesrange'][i]+ "</td>");
            $("#mnGrTblBdy").append("<td >" +maingraphdata['testorders'][i]+ "</td>");
            $("#mnGrTblBdy").append("<td >" +maingraphdata['cmpltdords'][i]+ "</td>");
            $("#mnGrTblBdy").append("<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>");
            $("#mnGrTblBdy").append("<td >" +maingraphdata['tstsstrtd'][i]+ "</td>");
            $("#mnGrTblBdy").append("<td >" +maingraphdata['tstscmpltd'][i]+ "</td>");

            $("#mnGrTblBdy").append("</tr>");

       } //end for loop

  // Add event listener for opening and closing details
  $('#example').on('click', 'td.details-control', function () {
      var tr = $(this).closest('tr');
      var row = table.row(tr);

      if (row.child.isShown()) {
          // This row is already open - close it
          row.child.hide();
          tr.removeClass('shown');
      } else {
          // Open this row
          row.child(format(tr.data('child-value'))).show();
          tr.addClass('shown');
      }
  });

  var table = $('#example').DataTable({});

但是附加的行显示为一个简单的表而不是数据表，也可以通过跟随错误

显示

Cannot read property 'length' of undefined

虽然数据是可见的，但不是在数据表中而是在简单的html表中。

Answer 1

我不认为你可以使用jquery追加汉堡面包等tr元素。要么使用字符串连接来构建汉堡包样式，要么以分层方式附加。

String concat（你必须搞乱语法，以便maingraphdata是一个变量而不是一个字符串，抱歉）：

var row = `<tr data-child-value="hidden 1">');
<td class='details-control'></td>
<td >" +maingraphdata['datesrange'][i]+ "</td>
<td >" +maingraphdata['testorders'][i]+ "</td>
<td >" +maingraphdata['cmpltdords'][i]+ "</td>
<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>
<td >" +maingraphdata['tstsstrtd'][i]+ "</td>
<td >" +maingraphdata['tstscmpltd'][i]+ "</td>
</tr>`

$("#mnGrTblBdy").append(row);

或者

正确追加

var $tr = $('<tr data-child-value="hidden 1"></tr>')
$tr.append("<td class='details-control'></td>");
$tr.append("<td >" +maingraphdata['datesrange'][i]+ "</td>");
$tr.append("<td >" +maingraphdata['testorders'][i]+ "</td>");
$tr.append("<td >" +maingraphdata['cmpltdords'][i]+ "</td>");
$tr.append("<td >" +maingraphdata['rptsdlvrd'][i]+ "</td>");
$tr.append("<td >" +maingraphdata['tstsstrtd'][i]+ "</td>");
$tr.append("<td >" +maingraphdata['tstscmpltd'][i]+ "</td>");

$("#mnGrTblBdy").append($tr);

如何将预先提取的数据附加到DataTable的tbody

1 个答案: