Question

我正在使用datatable 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
    ]
} );

DataTable view 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>

请告知

Answer 1

你需要使用回调定义render属性，该回调通过提供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>';
                                } 
        },
    ]

Answer 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>';

                    }
                    }
                    ],

        } );
} );

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

2 个答案: