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样式

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值