Question

我有这个DataTable：

<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>

我想使用AJAX调用用数据填充表格。我有以下AJAX代码：

function SearchResult(){

      $.ajax({
          url: 'php/search.php,
          type: 'get',
          data: $("#form_search").serialize(),
          dataType: 'json',
          success: function (data) {
            if (data.success) {
                $("#tabela_1 > tbody").html("");
                $.each(data, function (index, record) {
                  if ($.isNumeric(index)) { 
                    var row = $("<tr />");
                    $("<td />").text(record.ID).appendTo(row);
                    $("<td />").text(record.name).appendTo(row);
                    row.appendTo('#tabela_1');
                  }
                });
            }
          }
        });
    }

此时我填写了表（在调用SearchResult()函数后）。

但是，当我按表格列对该列进行排序时，所有数据都会消失。当我使用表格搜索框时也会发生同样的情况。我尝试使用fnDraw()和fnUpdate()，但没有效果。

Answer 1

建议不要使用<tr> / <td>个节点向表中添加数据，而是使用相应的DataTables API方法，例如row.add()。

<强> JavaScript的：

success: function (data) {
   var table = $("#tabela_1").DataTable();

   if (data.success){
      table.clear();
      $.each(data, function (index, record){
         if ($.isNumeric(index)) {
            table.row.add([record.ID, record.name]);
         }
      });

      table.draw();
   }
}

<强> HTML：

<table class="table table-striped table-bordered table-advance table-hover" id="tabela_1">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
        </tr>
    </thead>
</table>

填充数据后数据消失

1 个答案: