如何以编程方式重新加载jquery数据表?

时间:2014-05-28 13:13:25

标签: jquery-datatables

我在页面上有一个jquery数据表,我想在用户操作后重新加载。另外,我没有在我的数据表上设置ajax参数,因为url总是在变化,我需要在得到它之后稍微处理一下JSON数据。

这是我最初设置数据表的代码。

$.getJSON(uri, function (people) {
        // ... code removed for brevity ...
        $("#people-table").dataTable({
            "data": people,
            "columns": [{
                "data": "id",
                "title": "Id"
            }, {
                "data": "full_name",
                "title": "Name"
            }, {
                "data": "phone",
                "title": "Home Phone"
            }, {
                "data": "cell_phone",
                "title": "Mobile"
            }, {
                "data": "email",
                "title": "Email"
            }]
        });

如何在用户操作后重新加载表格(如点击按钮)?

1 个答案:

答案 0 :(得分:1)

这是你如何做到的。

(如果您必须在将JSON数据设置为数据表之前预先处理JSON数据,我建议只执行此操作。如果您可以使用数据表ajax参数,那么这是首选。)

        $.getJSON(uri, function(people) {
        // ... code removed for brevity ...
        if (if ($.fn.DataTable.isDataTable("#people-table"))) {
            var api = $("#people-table").dataTable().api();
            api.clear();
            people.forEach(function(row, idx) {
                api.row.add(row);
            });
            api.draw();
        } else {

            $("#people-table").dataTable({
                "data": people,
                "columns": [
                { "data": "id", "title": "Id" },
                { "data": "full_name", "title": "Name" },
                { "data": "phone", "title": "Home Phone" },
                { "data": "cell_phone", "title": "Mobile" },
                { "data": "email", "title": "Email" }
                ]
            });
        }