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

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

最严重的部分是插入到<tbody>每个<tr>的<th>数与<td>数之间不匹配。

当您以这种方式处理dataTables时， 绝对必不可少的是<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() 。