如何从 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函数的脚本

$(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> 的数量与插入到<tbody> 的每个<tr> 中的<td> 的数量不匹配。

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

您应该将[[A,B,C,etc][A,B,C,etc]..] 形式的数组作为data 传递给dataTables，而不是在代码中构建<tbody>。如果让 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()。