Question

所以我得到了这个html表

<table id="tabel_komponen" class="datatable-1">
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
    </tr>
  </thead>
  <tbody id="badan_tabel">
  </tbody>
</table>

以及从url调用数据并将数据附加到表中的函数

function init()  {
  for(x=1;x<=100;x++) {
    $.get("http://somewebsite/data/data_user", {id:x}, function(data) 
    { 
        console.log(data);
        var tr="<tr><td>" + data.A + "</td>";
            tr += "<td>" + data.B + "</td>";
            tr += "<td>" + data.C + "</td>";
            tr += "<td>" + data.D + "</td>";
            tr += "<td>" + data.E + "</td>";
            tr += "<td><button img class='editbtn' onclick='edit_komponen("+x+")'>edit</button></td></tr>";
            tr += "<td><button img class='savetbtn' onclick='edit_komponen("+x+")'>edit</button></td></tr>";

        $("#tabel_komponen").append(tr);
     });
   }
 }

我已经使用了datatable插件，但它总是给我一个说“表中没有数据”的结果

这是我用来调用dataTable函数的脚本

$(document).ready(function() {
  $('.datatable-1').dataTable();
  $('.dataTables_paginate').addClass("btn-group datatable-pagination");
  $('.dataTables_paginate > a').wrapInner('<span />');
  $('.dataTables_paginate > a:first-child').append('<i class="icon-chevron-left shaded"></i>');
  $('.dataTables_paginate > a:last-child').append('<i class="icon-chevron-right shaded"></i>');
});

谢谢

Answer 1

最严重的部分是，<th>的数量与插入的每个<td>中<tr>的数量不匹配<tbody>。

当您以这种方式处理dataTable时，绝对必不可少的是<th>元素的数量等于<td>的数量每一行。这就是为什么你永远不会在dataTable中获得任何数据 - 它根本无法初始化。所以你必须纠正这个。

您应该将<tbody>表单上的数组作为[[A,B,C,etc][A,B,C,etc]..]传递给dataTables，而不是在代码中构建data。如果让dataTables本身构建基础<tbody>结构，那就更有效了：

function init()  {
    var data = [];
    for (var x=1;x<=100;x++) {
       $.get("http://somewebsite/data/data_user", {id:x}, function(response) { 
          data.push([
            response.A,
            response.B,
            response.C,
            response.D,
            response.E,
            "<button img class='editbtn' onclick='edit_komponen("+x+")'>edit</button>",
            "<button img class='savetbtn' onclick='edit_komponen("+x+")'>edit</button>"
          ]);
          if (x==100) return data;
      })
   }
}

初始化：

$(document).ready(function() {
  $('.datatable-1').dataTable({
     data: init() //NB!
  })
);

注意：如果您使用的是1.9.x或更低版本，请改用aaData : init()。

如何从URL获取数据（表）并将其放入Jquery DataTable

1 个答案: