Datatables加按钮,自定义操作列

效果图

在这里插入图片描述

代码:

这是本地加载,用的是不固定行和列,自己参考官网,改成ajax即可。

 var columns = [
        {title: "编号"},
        {title: "来源"},
        {title: "客户名称"},
        {title: "故障主题"},
    ]
    var dataSet = [
        ['20180703001', '监控发现', '云惠', '事件单加载异常'],
        ['20180703002', '故障申报', '新世纪', '待办未刷新'],
        ['20180703003', '故障申报', '新世纪', '待办未刷新'],
    ]

    var table = $('#list_Info').DataTable({
        data: dataSet,
        columns: columns,
        "columnDefs" : [ {
// 定义操作列,######以下是重点########
            "targets" : 3,//操作按钮目标列
            "data" : null,
            "render" : function(data, type,row) {
                var id = '"' + row.id + '"';
                var html = "<a href='javascript:void(0);'  class='delete btn btn-default btn-xs'  ><i class=' glyphicon glyphicon-eye-open'></i> 查看</a>"
                html += "<a href='javascript:void(0);' class='up btn btn-default btn-xs'><i class=' glyphicon glyphicon-edit'></i> 编辑</a>"
                html += "<a href='javascript:void(0);'   class='down btn btn-default btn-xs'  οnclick='deleteThisRowPapser("+ id + ")' > <i class='fa fa-times'></i> 删除</a>"
                return html;
            }
        } ],
    });

参考连接:
http://datatables.club/ Datatable 官网
https://blog.csdn.net/weixin_40408338/article/details/80900614 不定行列
https://www.runoob.com/bootstrap/bootstrap-glyphicons.html bootstrap样式

©️2020 CSDN 皮肤主题: 技术黑板 设计师:CSDN官方博客 返回首页