Question

对此有很多疑问，但我从来没有找到一个对我有用的问题。我有一个简单而简单的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并将新数据添加到表中，但数据表插件不会随之更新。我尝试过其他的事情，比如

.fnDraw（假）;

但它什么都没做我从

收到JSON错误

fnReloadAjax（）

关于如何更新表格的任何线索？

Answer 1

试试这个

最初你初始化了表，所以先清除那个表

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

DEMO

Answer 2

我知道这是一篇旧文章，但我刚刚调查了这个问题，我找到了在DataTable手册页中解决问题的最简单方法：https://datatables.net/reference/api/ajax.reload%28%29 所有你需要调用table.ajax.reload（）;

Answer 3

var table =  $('#product_table').DataTable({
    "bProcessing": true,
    "serverSide": true,
    responsive: true,
    "ajax": {
        url: get_base_url + "product_table", // json datasource
        type: "post", // type of method  ,GET/POST/DELETE
        error: function () {
            $("#employee_grid_processing").css("display", "none");
        }
    }
});

//call this funtion 
$(document).on('click', '#view_product', function () {
  table.ajax.reload();
});

Answer 4

我做过与此相关的事情......以下是您需要的示例javascript。这里有一个演示：http://codersfolder.com/2016/07/crud-with-php-mysqli-bootstrap-datatables-jquery-plugin/

<form method="GET" action="http://somewhere.com" >
    <div class="input-wrap">
       <input type="text" name="url" id="myInputType" class="block"  />
       <input type="submit" class="block" />
    </div>
 </form>

Answer 5

从版本1.10.0开始，您可以使用ajax.reload() api。

var table = $('#myTable').DataTable();
table.ajax.reload();

请记住使用$('#myTable').DataTable()而不是 $('#myTable').dataTable()

刷新jQuery数据表

5 个答案: