如何從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() 。