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

Question

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

在使用 dataTables 之前，我有一些 JavaScript 逻辑可以遍历来自 Ajax 的记录数组，调用并用数据填充常规 table，并且适当的 hyper-links.

 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>")
  }
}

从上面的代码示例中可以看出，在我的 hyperlinks 中，我需要从每一行传递一些数据，或者作为查询字符串的一部分（在这种情况下的编辑）或只是将它们作为参数传递给另一个名为“delete”的 JavaScript 函数，该函数与此数据表位于同一文件中。而且它是有条件的...意思是，hyperlinks 会根据 grp 是真还是假而改变。

我想知道如何更改填充 dataTable 的逻辑以包含这两个 hyper-link？

我发现了这个 link：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 代码中的 table 添加了一个新列。我确实得到了一个 hyperlink！但不幸的是，link 是不正确的。行 [0] returns“未定义”。另外，我仍然不知道如何根据字段“目的地”的值更改我创建的 hyperlink。因此，例如，我想做这样的事情：（伪代码）

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

DataTables 支持编辑和删除操作。删除相当简单，像这样：

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

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

Answer 2

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

Ajax人口
数据行是一个包含 4 列的数组
您的数据行包含第一列的 ID
你没有在 table 上显示 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 3

看看我的专栏片段部分

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 只返回 Link

结果是

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

jquery dataTables - how to add an edit and delete option

html

javascript

jquery

datatables