效果图
代码:
这是本地加载,用的是不固定行和列,自己参考官网,改成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样式