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>&nbsp;<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>&nbsp;<a href='/User/Delete?id=" + full.id + "'>删除</a>";
                            }
                        }
                    ]
                });