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

问题描述

去过很多问题，关于这一点，但我从来没有发现一个为我工作。我有卫生组织身体平原和简单的HTML表格填充从一个AJAX调用行。 然后我想更新表数据表插件，但它不工作。 我有一个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
            ]
        });
});

最后我的DropDownList的改变功能

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（假）;

.fnDraw(false);

但不起任何作用 虽然我从得到一个JSON错误

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（）;

然后阿贾克斯成功后重新初始化

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屋！