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

正如您从上面的代码示例中看到的，在我的超链接中，我需要从每一行传递一些数据，作为查询字符串的一部分(在编辑的情况下)或者只是将它们作为另一个名为“delete”的 JavaScript 函数的参数，该函数与此 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>';}
                }
        ]
    } );
    
} );

注意渲染的调用引用。我还在我的 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

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

• 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
    }
}