如何从 url 中获取数据 (table) 并将其放入 Jquery DataTable

Question

所以我得到了这个 html table

<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 调用数据并将数据附加到 table

的函数

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 插件，但它总是给我一个结果 "No Data In The Table"

这是我用来调用 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

最严重的部分是插入到 [=15= 的每个 <tr> 中 <th> 的数量与 <td> 的数量不匹配].

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

与其在代码中构建 <tbody>，不如将 [[A,B,C,etc][A,B,C,etc]..] 形式的数组作为 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 中获取数据 (table) 并将其放入 Jquery DataTable

How To get data(table) from an url and put it into Jquery DataTable

javascript

jquery

datatables