DataTables如何重新加载数据

你的名字 2022-04-25 02:36 1014阅读 0赞

### DataTables加载数据 ###

// 调用ajax请求数据
    g.ajax("/srp/data", data, function (jsonStr) {
        // setValue为table的tbody动态生成tr，并渲染数据
        setValue(JSON.parse(jsonStr));
        // 初始化DataTables
        var table = $('#datatable-buttons8').DataTable({
            // DataTables的配置属性：http://www.datatables.club/reference/option/
            lengthChange: false,
            buttons:  ['copy', 'excel', 'pdf']
        });
        table.buttons().container()
            .appendTo('#datatable-buttons8_wrapper .col-md-6:eq(0)');
    }, null, null);

### DataTables重新加载新数据 ###

// 再次调用ajax请求新数据
    g.ajax("/srp/data", data, function (jsonStr) {
        // 清空DataTables数据
        $("#datatable-buttons8").dataTable().fnClearTable();
        // 销毁旧的DataTables对象，以便初始化新的DataTables
        $("#datatable-buttons8").dataTable().fnDestroy();
        // 动态生成tr，并渲染数据
        setValue(JSON.parse(jsonStr));
        // 照常初始化DataTables
        var table = $('#datatable-buttons8').DataTable({
            // DataTables的配置属性：http://www.datatables.club/reference/option/
            lengthChange: false,
            buttons:  ['copy', 'excel', 'pdf']
        });
        table.buttons().container()
            .appendTo('#datatable-buttons8_wrapper .col-md-6:eq(0)');
    }, null, null);

附上动态生成**tr**的代码：

// setValue根据clsName的不同进入setTableValue
    function setTableValue(clsName, jsonStr) {
        var table = $("." + clsName + " tbody");
        // 在此之前可以清空所有旧的tr
        table.empty();
        var data = jsonStr[clsName];
        for (var i = 0; i < data.length; i++) {
            // 生成tr
            var $trTemp = $("<tr></tr>");
            var obj = data[i];
            var keys = Object.keys(obj);
            var attrCount = keys.length;
            for (var j = 0; j < attrCount; j++) {
                // 生成td
                $trTemp.append("<td>"+ obj[keys[j]] +"</td>");
            }
            $trTemp.appendTo(table);
        }
    }

***DataTables更多属性介绍：***

*[http://www.datatables.club/reference/option/][http_www.datatables.club_reference_option]*

*[https://www.cnblogs.com/xiashengwang/p/8087181.html][https_www.cnblogs.com_xiashengwang_p_8087181.html]*

***DataTables国际化示例：***

*[https://blog.csdn.net/qq\_22690445/article/details/79682311][https_blog.csdn.net_qq_22690445_article_details_79682311]*

[http_www.datatables.club_reference_option]: http://www.datatables.club/reference/option/
[https_www.cnblogs.com_xiashengwang_p_8087181.html]: https://www.cnblogs.com/xiashengwang/p/8087181.html
[https_blog.csdn.net_qq_22690445_article_details_79682311]: https://blog.csdn.net/qq_22690445/article/details/79682311