Question

现在，通过服务器端正确填充表，我的分页工作正常。但我想添加删除和/或编辑行的功能。我想添加一个名为＆＃34; Actions＆＃34;的列。它有两个 - 一个用于编辑方法...另一个用于删除方法。

在使用dataTables之前，我有一些JavaScript逻辑可以遍历来自Ajax的记录数组，调用并使用数据填充常规表以及相应的超链接。

 for (var i=0; i < data.length; i++) {
  if (data[i].grp == 0) {
     tr.append("<a href='add.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");
     tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ");'>Delete</button></td>")

 } else {
     tr.append("<a href='update_group.html?id=" + data[i].id + "&pid=" + data[i].pid + "&destination=" + data[i].destination + "&name=" + data[i].name.replace("'", "%27") + "'</a><button class='btn btn-xs btn-primary'>Edit</button>&nbsp;</td>");
     tr.append("<button class='btn btn-xs btn-primary' onclick='delete(" + data[i].id + "," + data[i].pid + ",true);'>Delete</button></td>")
  }
}

从上面的代码示例中可以看出，在我的超链接中，我需要从每一行传递一些数据，作为查询字符串的一部分（在编辑的情况下）或者只是将它们传递给另一个JavaScript函数的参数名为＆＃34; delete＆＃34;它与此dataTable位于同一文件中。并且它是有条件的...意思是，超链接将根据grp是否为真而改变。

我想知道如何更改填充dataTable的逻辑，现在包含这两个超链接？

我找到了这个链接：http://datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete#但是代码对我来说并不起作用，我想我现在读到了fnRender方法现已弃用的地方。

如果您有任何建议，我会很感激。

编辑1

我尝试将代码更改为：

$(document).ready(function() {
    var selected = [];
    $('#users').DataTable( {

        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/test",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pid", "searchable":true },    
                { "data": "destination", "searchable":true },
                {"mRender": function ( data, type, row ) {
                        return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
                }
        ]
    } );

} );

注意对render的调用引用。我还在我的html代码中向我的表添加了一个新列。我有一个超链接！但不幸的是，链接不正确。 row [0]返回＆＃34; undefined＆＃34;。此外，我仍然不知道如何更改我创建的超链接，具体取决于字段＆＃34; destination＆＃34;的值。所以，例如，我想做这样的事情:(伪代码）

if row[i].destination = 'Group' then
                    {"mRender": function ( data, type, row ) {
                            return '<a href=group.html?id="'+row[0]+'">Edit</a>';}
                    }
else
                    {"mRender": function ( data, type, row ) {
                            return '<a href=add.html?id="'+row[0]+'">Edit</a>';}
                    }
end

编辑2

此代码似乎有效：

$（document）.ready（function（）{ var selected = []; $（＆＃39;＃users＆＃39;）。DataTable（{

        "serverSide": true,
        "ordering": false,
         aLengthMenu: [
                [10, 25, 50, 100, "-1"],
                [10, 25, 50, 100, "All"]
        ],
        "ajax": "/cgi-bin/test",
        "rowCallback": function( row, data ) {
            if ( $.inArray(data.DT_RowId, selected) !== -1 ) {
                $(row).addClass('selected');
            }
        },
        "columns": 
        [    
                { "data": "id" ,"searchable":false},
                { "data": "name","searchable":true},    
                { "data": "pid", "searchable":true },    
                { "data": "destination", "searchable":true },
                {"mRender": function ( data, type, row ) {
                        return '<a href=add.html?id='+row.id+'>Edit</a>';}
                }
        ]
    } );

现在我只需要弄清楚如何让它成为条件。

Answer 1

这里有一个假设如下的例子：

Ajax人口
数据行是一个包含4列的数组
您的数据行包含第一列的ID
您不会在桌面上显示ID，因此您将其隐藏

根据您的需求调整它应该不难。检查columns用法

var datatablesOptions = {
    "serverSide": true,
    "ajaxSource": '[yourAjaxUrl]',
    "processing": true,
    "columns": [
        { bVisible = false }, // assume this is the id of the row, so don't show it
        null,
        null,
        null,
        /* EDIT */ {
            mRender: function (data, type, row) {
                return '<a class="table-edit" data-id="' + row[0] + '">EDIT</a>'
            }
        }
        /* DELETE */ {
            mRender: function (data, type, row) {
                return '<a class="table-delete" data-id="' + row[0] + '">DELETE</a>'
            }
        },              
     ]
};
$('#table').dataTable(datatablesOptions);

修改

如果您需要根据destination条件呈现不同的内容，您可以

mRender: function (data, type, row) { if (row.destination == "d1") { return '<a href="destination1?id=' + row.id + '">EDIT</a>' }else (row.destination == "d2"){ return '<a href="destination2?id=' + row.id + '">EDIT</a>' } else { // some error telling that destination value is unexpected } }

Answer 2

看一下我的Snippet of Columns部分

columns: [
    { 'data': 'LastName' },
    { 'data': 'FirstMidName' },
    { 'data': 'EnrollmentDate' },
    {// this is Actions Column 
        mRender: function (data, type, row) {
            var linkEdit = '@Html.ActionLink("Edit", "Edit", new {id= -1 })';
            linkEdit = linkEdit.replace("-1", row.ID);

            var linkDetails = '@Html.ActionLink("Details", "Details", new {id= -1 })';
            linkDetails = linkDetails.replace("-1", row.ID);

            var linkDelete = '@Html.ActionLink("Delete", "Delete", new {id= -1 })';
            linkDelete = linkDelete.replace("-1", row.ID);

            return linkDetails + " | " + linkEdit + " | " + linkDelete;
        }
    }

这是我的Json的片段

{ID: 1, LastName: "Alexander", FirstMidName: "Carson", EnrollmentDate: "/Date(1126386000000)/",…}

注意我正在使用ASP.Net MVC，所以Html.ActionLink只返回一个链接

结果是

Answer 3

DataTables支持编辑和删除操作。删除非常简单，如下所示：

$('#id tbody').on('click', function(){
    table
        .row($(this).parents('tr'))
        .remove()
        .draw();
});

看看这个例子： https://editor.datatables.net/examples/simple/inTableControls.html

jquery dataTables - 如何添加编辑和删除选项

3 个答案: