jquery.dataTables自定义操作列的实现
话不多说，首先肯定还是先引用两个插件，jquery插件和jquery.dataTables插件；然后 javaScript 代码如下；都是一些比较常用的参数，本示例是通过ajax后台分页渲染实现的列表；具体可参考上一篇；
本篇主要讲新增自定义列，表格头部thead中新增操作列 <th>操作</th> ;
Html代码：
<table class="ax-table ax-hover ax-stripe ax-border ax-align-left" id="airport"> <thead> <tr> <th>序号</th> <th>名称</th> <th>性别</th> <th>创建时间</th> <th>昵称</th> <th>企业代码</th> <th>操作</th> </tr> </thead> </table>
然后在js中的DataTable初始化中，添加 columnDefs ；第一个大括号里是对表格的第六列添加样式；最后一列是新增的操作列，主要是对数据的预览和删除；这里的data的值通过打印发现是返回信息中未用到的Name字段，并不是我们想要的id；
id的实际取值格式为full.id，可以自行打印试下。
columnDefs: [ // 将companyCode列变为红色 { "targets": [5], // 目标列位置，下标从0开始 "data": "salary", // 数据列名 "render": function (data, type, full) { // 返回自定义内容 return "<span style='color:blue;'>" + data + "</span>"; } }, // 增加一列，包括删除和修改，同时将我们需要传递的数据传递到链接中 { "targets": [6], // 目标列位置，下标从0开始 "data": "name", // 数据列名 "render": function (data, type, full) { // 返回自定义内容 console.log(data); return "<a href='/User/UserInfo?id=" + full.id + "'>预览</a> <a href='/User/Delete?id=" + full.id + "'>删除</a>"; } } ]
完整的dataTable初始化代码如下：
JavaScript代码：
$('#airport').DataTable({
processing: true,
serverSide: true, //服务端分页
paging: true,
pageLength: 10,//分页大小
deferRender: true,
// "sAjaxDataProp" : "aData",//是服务器分页的标志，必须有
// "fnServerData": retrieveData,//分页回调函数
ajax: function (data, callback, settings) {//ajax配置为function,手动调用异步查询
var searchParams = {};
searchParams.pageSize = data.length;
searchParams.pageIndex = data.start % data.length === 0 ?
(data.start / data.length + 1) : ((data.start % data.length) + 2);
$.ajax({
type: "post",
url: "/User/GetJson",
cache: false, //禁用缓存
data: searchParams, //传入已封装的参数
dataType: "json",
success: function (res) {
data.pageNum += 1;
var lists = res;
//封装返回数据，这里仅演示了修改属性名
var returnData = {};
returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
returnData.recordsTotal = lists.pages;
returnData.recordsFiltered = lists.total;//后台不实现过滤功能，每次查询均视作全部结果
returnData.data = lists.data;
//关闭遮罩
//$wrapper.spinModal(false);
//调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染
//此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕
if (searchParams) {
$.extend(searchParams, searchParams);
}
callback(returnData);
},
error: function (
XMLHttpRequest,
textStatus,
errorThrown) {
Toast('查询失败', 'warning', 'danger');
}
});
},
//设置数据
columns: [
{ data: "id", defaltContent: 0 },
{ data: "name", defaultContent: "空" },
{ data: "sex", defaultContent: "未知性别" },
{ data: "nickName", defaultContent: "空" },
{ data: "createTime", defaultContent: "未知" },
{ data: "companyCode", defaultContent: "空" }
],
columnDefs: [
// 将companyCode列变为红色
{
"targets": [5], // 目标列位置，下标从0开始
"data": "salary", // 数据列名
"render": function (data, type, full) { // 返回自定义内容
return "<span style='color:blue;'>" + data + "</span>";
}
},
// 增加一列，包括删除和修改，同时将我们需要传递的数据传递到链接中
{
"targets": [6], // 目标列位置，下标从0开始
"data": "name", // 数据列名
"render": function (data, type, full) { // 返回自定义内容
console.log(data);
return "<a href='/User/UserInfo?id=" + full.id + "'>预览</a> <a href='/User/Delete?id=" + full.id + "'>删除</a>";
}
}
]
});
