jquery 如何使用新的JSON数据手动更新datatables表

6yt4nkrj  于 2023-05-06  发布在  jQuery
关注(0)|答案(6)|浏览(101)

我正在使用插件jQuery datatables并加载我在页面底部的DOM中加载的数据,并以这种方式启动插件:

var myData = [
    {
        "id": 1,
        "first_name": "John",
        "last_name": "Doe"
    }
];

$('#table').dataTable({
    data: myData
        columns: [
        { data: 'id' },
        { data: 'first_name' },
        { data: 'last_name' }
    ]
});

现在,在执行一些操作后,我想 AJAX 获取新数据(但不是ajax选项内置在数据表中-不要误会我!))并使用这些数据更新表。我如何使用datatables API做到这一点?文档非常混乱,我找不到解决方案。任何帮助将非常感谢。谢谢

yduiuuwa

yduiuuwa1#

解决方案:(注意:该解决方案用于数据表版本1.10.4(目前)而不是遗留版本)。
澄清根据API documentation(1.10.15),API有三种访问方式:

  1. DataTables的现代定义(大写):
    var datatable = $( selector ).DataTable();
  2. DataTables的遗留定义(小写):
    var datatable = $( selector ).dataTable().api();
    1.使用new语法。
    var datatable = new $.fn.dataTable.Api( selector );
    然后像这样加载数据:
$.get('myUrl', function(newDataArray) {
    datatable.clear();
    datatable.rows.add(newDataArray);
    datatable.draw();
});

使用draw(false)在数据更新后保持在同一页面上。
API参考:
https://datatables.net/reference/api/clear()
https://datatables.net/reference/api/rows.add()
https://datatables.net/reference/api/draw()

i34xakig

i34xakig2#

您可以用途:

$('#table').dataTable().fnClearTable();
$('#table').dataTable().fnAddData(myData2);

Jsfiddle
更新。是的,目前的文档不是很好,但如果你可以使用旧版本,你可以参考legacy documentation

wnavrhmk

wnavrhmk3#

您需要销毁旧的数据表示例,然后重新初始化数据表
首先使用**$.fn.dataTable.isDataTable**检查数据表示例是否存在
如果存在,则销毁它,然后像这样创建新示例

if ($.fn.dataTable.isDataTable('#dataTableExample')) {
        $('#dataTableExample').DataTable().destroy();
    }

    $('#dataTableExample').DataTable({
        responsive: true,
        destroy: true
    });
t5zmwmid

t5zmwmid4#

下面是遗留数据表1.9.4的解决方案

var myData = [
      {
        "id": 1,
        "first_name": "Andy",
        "last_name": "Anderson"
      }
   ];
    var myData2 = [
      {
        "id": 2,
        "first_name": "Bob",
        "last_name": "Benson"
      }
    ];

  $('#table').dataTable({
  //  data: myData,
       aoColumns: [
         { mData: 'id' },
         { mData: 'first_name' },
         { mData: 'last_name' }
      ]
  });

 $('#table').dataTable().fnClearTable();
 $('#table').dataTable().fnAddData(myData2);
j2qf4p5b

j2qf4p5b5#

在我的例子中,我没有使用内置 AJAX API将Json馈送到表中(这是由于一些格式在数据表的呈现回调中很难实现)。
我的解决方案是在onload函数和处理数据刷新的函数(例如var table = null)的外部作用域中创建变量。
然后在onload方法中示例化我的表

$(function () {
            //.... some code here
            table = $("#detailReportTable").DataTable();
            .... more code here
        });

最后,在处理刷新的函数中,我调用clear()和destroy()方法,将数据提取到html表中,并重新示例化datatable,如下所示:

function getOrderDetail() {
            table.clear();
            table.destroy();
            ...
            $.ajax({
             //.....api call here
            });
            ....
            table = $("#detailReportTable").DataTable();
   }

希望有人觉得这有用!

pobjuy32

pobjuy326#

我知道我的回答与问题没有直接的关系,但是我花了很多时间在寻找在较新版本的数据表中做同样事情的方法,所以我希望我的例子将来能保存一些人的时间

const table = js('#tbllist').DataTable({
    columns: [
        {data: 'createDate'},
        {data: 'status'},
        {data: 'paymentType'},
        {data: 'currency'},
        {data: 'amount'}
    ]
});

// Assume that this array has objects of new data with structure defined above
const arr = [] 

// These will update table
table.clear();
table.rows.add(arr);
table.draw();

相关问题