DataTable 服务器端处理添加编辑列答案

【问题标题】：DataTable serverside processing adding edit columnDataTable 服务器端处理添加编辑列
【发布时间】：2016-12-18 16:53:55
【问题描述】：

我正在使用数据表 1.10.13 服务器端处理。我想添加一个带有编辑用户链接的“编辑”列。这个怎么做？

我的 js 文件

$('#userTable').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        "type": "GET",
        "url": "",
        "dataSrc": "data",
        "contentType": "application/json; charset=utf-8",
        "dataType": "json",
        "processData": true
    },

    "columns": [
        { "data": "id" },
        { "data": "email" },
        { "data": "" }, //edit link column
    ]
} );

数据表查看php

<table cellspacing="0" id="userTable" class="display">
    <thead>
    <tr>
        <th class="ui-state-default">Name</th>
        <th class="ui-state-default">Email</th>
        <th class="ui-state-default">EDIT</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

请指教

【问题讨论】：

标签： jquery datatables

【解决方案1】：

您需要使用回调定义渲染属性，该回调如何通过提供 html 来呈现列：

"columns": [
        { "data": "id" },
        { "data": "email" },
        { "data": "id",
          "searchable": false,
          "sortable": false,
          "render": function (id, type, full, meta) {
                                    return '<a href="/user/userdata/'+id+'"><i class="fa fa-pencil"></i></a>';
                                } 
        },
    ]

【讨论】：

如何将 id 传递给 url 编辑 url：这是我当前的 url return '';
我收到错误 Uncaught ReferenceError: id is not defined
将函数的参数名称从data更改为渲染回调的id，我的打字错误

【解决方案2】：

您可以在数据表的列定义内提供链接

$('#userTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
    "type": "GET",
    "url": "/user/userListData",
    "dataSrc": "data",
    "contentType": "application/json; charset=utf-8",
    "dataType": "json",
    "processData": true
},

"columns": [
    { "data": "id" },
    { "data": "email" },
    { "data": "" }, //edit link column
],
columnDefs: [   {
                       "targets": 0,
                       "orderable": false
                    },

                    {
                      "targets": 1,
                      "orderable": false,

                    }
                    ,{
                      "targets": 2,
                      "orderable": false,
                       "render": function ( data, type, row ) {
                           return '<a href="#" class="yourClass">Edit</a>';

                    }
                    }
                    ],

        } );
} );

【讨论】：