单击 jQuery DataTable 中的编辑按钮后从数据库中获取 id答案

【问题标题】：Get the id from database after clicking on a edit button in jQuery DataTable单击 jQuery DataTable 中的编辑按钮后从数据库中获取 id
【发布时间】：2017-03-11 20:07:39
【问题描述】：

当我点击某一行的删除按钮时，我需要从数据库中获取该行的id，这样一旦得到该id就可以发送给控制器删除该行。

我试图这样做。

这是我的 HTML 表格。

<table id="tableClient" class="table table-bordered table-striped">
    <thead>
        <tr>
            <th>Delete</th>
            <th>Name</th>
            <th>Last Name</th>
            <th>RUC</th>
            <th>Phone</th>
            <th>Email</th>
        </tr>
    </thead>
    <tbody>                                                
    </tbody>
</table>

使用 jQuery DataTable 我正在尝试这样做：

var table = $('#tableClient').DataTable({
    "columnDefs": [{
        "width": "5%",
        "targets": [0]
    },
    {
        "className": "text-center custom-middle-align",
        "targets": [1, 2, 3, 4, 5]
    }, ],
    "language":
    {
        "processing": "<div class='overlay custom-loader-background'><i class='fa fa-cog fa-spin custom-loader-color'></i></div>"
    },
    "processing": true,
    "serverSide": true,
    "ajax":
    {
        "url": "/Mantenimiento/FiltrarClientesTablaAsync",
        "type": "POST",
        "dataType": "JSON",
    },
    "columns": [
    {
        bSortable: false,
        mRender: function (o) { return '<button type="button" onclick="delete(id);" class="btn btn-default delete"><span class="glyphicon glyphicon-remove" /></button>'; }
    },
    {"data": "Name"},
    {"data": "LastName"},
    {"data": "RucClient"},
    {"data": "Phone"},
    {"data": "Email"}
    ],
});

问题是当我单击删除按钮时，我想调用 onclick="delete(id);"事件并将 id 发送到该事件，该事件将删除该 id 的行。知道如何使用 jQuery 和 MVC 做到这一点吗？

【问题讨论】：

你不能传递每个客户端的ID并在初始加载时将其放入DataTable中吗？这样，您已经拥有它来执行删除。如果担心，您可以将其隐藏起来。

标签： javascript jquery asp.net-mvc html datatables

【解决方案1】：

我能够找出我需要的东西。我只需要将名为 data-id 的数据属性与数据库的 id 一起添加，然后将其作为“this”的引用传递给 delete 方法。

这是我的解决方案：

"columns": [
    {
        data: null,
        bSortable: false,
        render: function (data, type, row) { return '<button type="button" onclick="delete(this);" class="btn btn-default delete" data-id="' + data.id + '"><span class="glyphicon glyphicon-remove" /></button>'; }
    },
  ],

【讨论】：

【解决方案2】：

您可以使用此方法将值传递给您编写的 delete() 函数。

{
    "data": null,
    "className": "class1 class2",
    "orderable": false,
    "render": function (data, type, row) {
        return '<button type="button" onclick="delete(' + data.Id + ');" class="btn btn-default delete"><span class="glyphicon glyphicon-remove" /></button>'; 
        // where data.Id is the Id of the entry in the row
    }
},

【讨论】：