刷新jQuery datatable表

  • Z时代
  • 2024-01-10
  • 分类：问答

对此有很多疑问，但我从未找到对我有用的问题。我有一个简单的HTML表，其主体被AJAX调用中的行填充。然后，我想用DataTable插件更新表，但是它不起作用。我有一个看起来像这样的HTML表：

<table id="myTable">
  <thead>
     <tr>
          <th>1</th>
          <th>2</th>
          <th>3</th>
          <th>4</th>
          <th>5</th>
     </tr>
  </thead>
  <tbody>
  </tbody>
</table>

在我的jQuery页面加载中

$(document).ready(function(){
        var oTable = $('#myTable').dataTable({
            "aoColumns": [
              { "bSortable": false },
              null, null, null, null
            ]
        });
});

最后是我的下拉列表更改功能

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
        var oTable = $('#myTable').dataTable(); // Nothing happens
        var oTable = $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

附件等已被修改以缩短它的长度，以此类推，因此不要过多地关注它。

基本上，问题是如何更新表，我可以执行AJAX并将新数据添加到表中，但是datatable插件不会随之更新。我尝试了其他事情，例如

.fnDraw（false）;

但是当我收到JSON错误时它什么也没做

fnReloadAjax（）

关于如何刷新表的任何线索？

回答：

试试这个

最初，您初始化了表，所以首先清除该表

$('#myTable').dataTable().fnDestroy();

然后在ajax成功后再次初始化

$('#myTable').dataTable();

像这样

$("#dropdownlist").on("change", function () {
        $("tbody").empty();
            $.ajax({
                type: "POST",
                url: "@Url.Action("ActionHere", "Controller")",
                dataType: "json",
                success: function (data) {
                    $.each(data, function (key, item) {
                        $("tbody").append("<tr><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td></tr>");
                    });
                }
            })
       $('#myTable').dataTable().fnDestroy();
       $('#myTable').dataTable({ // Cannot initialize it again error
                "aoColumns": [
                  { "bSortable": false },
                  null, null, null, null
                ]
            });
        });

演示

以上是 刷新jQuery datatable表 的全部内容， 来源链接： utcz.com/qa/431512.html

回到顶部