首页 文章

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

提问于
浏览 次
3

我有以下代码：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方法现在已被弃用了 .

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

EDIT 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]返回“undefined” . 另外，我仍然不知道如何更改我创建的超链接，具体取决于字段“destination”的值 . 所以例如，我想做这样的事情:(伪代码）

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

EDIT 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>';}
                }
        ]
    } );

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

javascript jquery html jquery-datatables

3 回答

  • 9

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

    • 阿贾克斯人口

    • 数据行是一个包含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);

    EDIT

    如果您需要根据 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
    }
}
    回复于
  • 1

    看看我的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 只返回一个链接

    结果是
    enter image description here

    回复于
  • 3

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

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

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

    回复于

相关问题