如何刷新数据表 [英] How to refresh DataTables

问题描述

我正在使用 DataTables 插件来使我的表格具有交互性.

I am using DataTables plugin to make my table interactive.

该表格在页面上由 PHP 回显.

The table is echo'd by PHP on the page.

当我向数据库添加记录时，我正在使用 jQuery load() 加载表，但这会破坏 DataTables.

When I add a record to the DB I am loading the table using jQuery load() but this breaks DataTables.

如何在保持 DataTables 完整的同时更新表格?

How can I update the table while still keeping DataTables Intact?

注意:我使用 DOM 作为数据源而不是服务器端处理.

Note: I am using DOM as the data source and not server side processing.

推荐答案

如果要完全重新加载整个表，请将初始数据表初始化代码包装在一个函数中.在页面加载时调用该函数.当用 ajax 完全替换表时，您可能应该删除由插件创建的表父 div 作为它创建的所有非表 DOm 元素的包装器.如果表 ID="example" ，包装器 id="example_wrapper".

If doing a complete reload of the whole table, wrap your initial datatables initialization code in a function. Call that function on page load. When replacing the table completely with ajax you likely should remove the table parent div that is created by plugin as a wrapper for all the non table DOm elements it creates. If table ID="example" , wrapper id="example_wrapper".

这里有足够的代码可能会让您顺利进行.有一些简单的方法可以只更新行，但由于请求是重新加载完整的表，所以我遵循了

Here's enough code will likely get you well on your way. There are easy ways to only update rows but since request is for a complete table reload I've followed that

function initDataTables(){
    $('#myTable').datatables({/* put all current options here*/})

}


/* within ready event of pageload */

$(function(){
    initDataTables();
    /* all other page load code*/

});

/* use $.get to reload table */

$.get( tableUpdateUrl, data, function( returnData){

    $('#myTable').parent().replaceWith(returnData);

    /* re-initalize plugin*/

    initDataTables();
}); 

这篇关于如何刷新数据表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！