jQuery Datatables 动态列

最新推荐文章于 2026-05-25 17:54:43 发布

原创最新推荐文章于 2026-05-25 17:54:43 发布 · 9.3k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#jQuery.Datatables #jquery #javascript

收录于

javascript 专栏收录该内容

5 篇文章

订阅专栏

本文介绍两种使用JavaScript和jQuery库动态更新DataTable的方法。通过AJAX请求获取新的表格数据和列定义，销毁旧表并重新初始化新表。

方法一：

var table = $('#myTable').DataTable();
 
$('#submit').on( 'click', function () {
    $.getJSON( 'newTable', null, function ( json ) {
        table.destroy();
        $('#myTable').empty(); // 动态列
 
        table = $('#myTable').DataTable( {
            columns: json.columns,
            data:    json.rows
        } );
    } );
} );

方法二：

var table = $('#myTable').DataTable();
 
$('#submit').on( 'click', function () {
    $.getJSON( 'newTable', null, function ( json ) {
        table.destroy();
       $(table .table().header()).find("tr").html(""); // 动态列
 
        table = $('#myTable').DataTable( {
            columns: json.columns,
            data:    json.rows
        } );
    } );
} );