前端：DataTable通用js

最新推荐文章于 2024-02-23 17:00:40 发布

转载最新推荐文章于 2024-02-23 17:00:40 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xuejianbest/p/10284963.html

文章标签：

#前端 #ViewUI

本文介绍了一种使用JavaScript和DataTable插件动态初始化表格的方法，通过从服务器获取数据填充表格，并实现了数据的实时更新和刷新功能。文章详细展示了如何设置表格的列定义、数据源以及自定义单元格渲染，同时提供了更新和刷新数据的具体实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//动态初始化表格，从服务器拿数据  
var id = "0";
var table = $('#list-table').DataTable( {
    "ajax" : {
        "url" : getRootPath()
                + "/data/standard/standard.do?method=GetTableData",
        "data" : function(d) { // d表示上一次请求的对象
        //  return $.extends({}, d, {org_code: 2});
        //                d.id = id; 
            return {
                "id" : id
            };
        },
        "dataSrc" : ""
    },
    "columns" : [ {
        "data" : null,
        "defaultContent" : "<input type='checkbox'>"
    }, {
        "data" : "tag_id"
    }, {
        "data" : "tag_name_cn"
    }, {
        "data" : "tag_meaning"
    }, {
        "data" : "date_time"
    }, {
        "data" : "tag_id"
    } ],
    "columnDefs" : [ {
        "targets" : [ 5 ],
        "render" : function(data, type, full) {
            var text = "<a href='standardcreate.htm?neibubiaoshifu="
                    + data + "'>编辑</a>";
            return text;
        }
    } ]
});

// 此处更新表格数据
$("#debug").click(function() {
    id = "2";
    table.ajax.reload();
})
// 此处刷新数据
$("#debug").click(function() {
    table.ajax.url(
        getRootPath() + 
        "/data/standard/catalog.do?method=GetCatalogStandard"
    ).load();
})