刷新 jQuery 数据表 [英] Refresh jQuery datatable table

问题描述

对此有很多问题，但我从未找到适合我的问题.我有一个简单明了的 HTML 表，其正文中填充了来自 AJAX 调用的行.然后我想用 DataTable 插件更新表，但它不起作用.我有一个如下所示的 HTML 表格:

Been plenty of questions about this but I never found one that worked for me. I have a plain and simple HTML table whos body is being filled with rows from an AJAX call. Then I want to update the table with DataTable plugin but it does not work. I have a HTML table that looks like this:

<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 页面加载中

In my jQuery pageload

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

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

And finally my on dropdownlist change function

$("#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
                ]
            });
        });

追加等已被修改以缩短它等所以不要过多关注它.

The append and so on has been modified to shorten it down, etc so do not focus too much on it.

基本上问题是如何更新表，我可以执行 AJAX 并将新数据添加到表中，但数据表插件不会随之更新.我试过其他的东西，比如

Basically the question is how to update the table, I can do my AJAX and add new data to the table fine, but the datatable plugin does not update with it. I've tried other things like

.fnDraw(false);

.fnDraw(false);

但它什么都不做虽然我收到来自

But it does nothing While I get an JSON error from

fnReloadAjax()

fnReloadAjax()

关于如何刷新表格的任何线索?

Any clues on just how to refresh the table?

推荐答案

试试这个

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

Initially you initialized the table so first clear that table

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

然后ajax成功后再初始化

Then initialize again after ajax success

$('#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 数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！