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

Question

我有以下代码： http : //jsfiddle.net/5ooyertu/1/

现在，该表正在通过服务器端正确填充，并且我的分页工作正常。 但我想添加删除和/或编辑行的功能。 我想添加一个名为“Actions”的列，它有两个——一个是编辑方法……另一个是删除方法。

在使用 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 函数。 而且它是有条件的……意思是，超链接将根据 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>';}
                }
        ]
    } );
    
} );

注意渲染的调用引用。 我还在我的 html 代码中向我的表中添加了一个新列。 我确实得到了一个超链接！ 但不幸的是，链接不正确。 row[0] 返回“未定义”。 此外，我仍然不知道如何根据“目的地”字段的值更改我创建的超链接。 例如，我想做这样的事情：（伪代码）

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 = [];
    $('#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.id+'>Edit</a>';}
                }
        ]
   });

现在我只需要弄清楚我将如何使其成为有条件的。

Answer 1

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

• 阿贾克斯人口
• 数据行是一个包含 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

看看我的列片段部分

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