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

我有以下代码：

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

在使用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>")
  }
}

for（变量i=0；i
如果你有任何建议，我将不胜感激

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

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

$（文档）.ready（函数（）{
所选var=[]；
$（“#用户”）。数据表（{
“服务器端”：正确，
“命令”：错误，
阿伦哲努：[
[10, 25, 50, 100, "-1"],
[10,25,50,100，“全部”]
],
“ajax”：“/cgi-bin/test”，
“rowCallback”：函数（行、数据）{
如果（$.inArray（data.DT_RowId，选中）！=-1）{
$（行）.addClass（'selected'）；
}
},
“栏目”：
[    
{“data”：“id”，“searchable”：false}，
{“data”：“name”，“searchable”：true}，
{“data”：“pid”，“searchable”：true}，
{“data”：“destination”，“searchable”：true}，
{“mRender”：函数（数据、类型、行）{
返回“”；}
}
]
} );
} );

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

如果行[i]。目的地='Group'，则
{“mRender”：函数（数据、类型、行）{
返回“”；}
}
其他的
{“mRender”：函数（数据、类型、行）{
返回“”；}
}
结束

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

$（文档）.ready（函数（）{
所选var=[]；
$（“#用户”）。数据表（{
“服务器端”：正确，
“命令”：错误，
阿伦哲努：[
[10, 25, 50, 100, "-1"],
[10,25,50,100，“全部”]
],
“ajax”：“/cgi-bin/test”，
“rowCallback”：函数（行、数据）{
如果（$.inArray（data.DT_RowId，选中）！=-1）{
$（行）.addClass（'selected'）；
}
},
“栏目”：
[    
{“data”：“id”，“searchable”：false}，
{“data”：“name”，“searchable”：true}，
{“data”：“pid”，“searchable”：true}，
{“data”：“destination”，“searchable”：true}，
{“mRender”：函数（数据、类型、行）{
返回“”；}
}
]
});

现在我只需要弄清楚如何使它有条件。
DataTables支持编辑和删除操作。删除相当简单，如下所示：

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

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

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


阿贾克斯种群
数据行是一个包含4列的数组
数据行包含第一列的id
您不在表上显示id，所以将其隐藏

适应你的需要应该不难。检查使用情况

请看我的专栏片段部分

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.NETMVC，所以
Html.ActionLink
只是返回一个链接

结果是
谢谢。我认为从gui上的表中删除该行“很容易”"但我需要知道如何调用我的后端功能…以及如何首先创建编辑/删除选项。哦，我明白你的意思。到目前为止，我实际上只使用jQuery DataTables来显示数据。现在是进一步研究的机会。你介意将mrender与我的JSFIDLE代码一起展示给我吗？我正在阅读您包含的关于列的引用…但我还不清楚如何使用您的示例。另外，我如何根据第[0]行的值更改超链接目标。目的地？很抱歉有这么多问题。谢谢。但是第[0]行正在返回未定义的值。我需要一个条件语句…我试图在我的编辑1中解释您是否可以调试并检查
行
是什么？顺便说一下：我对代码进行了更改，允许通过ajax调用执行删除/编辑操作。您应该为
表编辑
和
表创建一个单击回调-删除
。我使用row.id和row.destination实现了它。但是超链接最终看起来像“myservername/myappname/add.html？id=”86"。因此，我必须以某种方式删除id周围的引号。关于如何测试row.destination的值，然后根据值创建不同的超链接，有什么想法吗？非常感谢，这种方法帮助我使用asp.net core 2 web应用程序。我能够添加mRender，并利用linDetails轻松创建删除和编辑链接。许多nks
{ID: 1, LastName: "Alexander", FirstMidName: "Carson", EnrollmentDate: "/Date(1126386000000)/",…}