如何使用 jQuery/Ajax 将元素的 Id 从我的 DataTable 传递到我的按钮？

Question

目前，我有按钮传递整行，但我只需要 Id。 有没有一种简单的方法可以让我提取表中元素的 ID？

这是数据表代码：

 <div>
        <table id="allAccounts" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Organization</th>
                    <th>State</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>

这些是 jQuery/Ajax 脚本：

@section Scripts{
    <script type="text/javascript" src="~/lib/jquery/dist/jquery.js"></script>
    <script type="text/javascript" src="//cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#allAccounts').DataTable(
                {
                    "responsive": true,
                    "ajax": {
                        "url": "/api/User/GetUsers",
                        "dataSrc": ""

                    },
                    "columns": [
                        { "data": "FirstName" },
                        { "data": "LastName" },
                        { "data": "Organization" },
                        { "data": "State" },
                        {
                            "data": "Id",
                            "render": function (data, type, row, meta) {
                                return "<button class='btn btn-primary' style=margin-right:5px; onclick=ViewUser(" + JSON.stringify(row) + ")>View Details</button>" +
                                    "<button class='btn btn-danger' style=margin-right:5px; onclick=DeleteUser(" + JSON.stringify(row) + ")>Delete</button>"

                            }
                        }
                    ]
                });
        });
        function ViewUser(data) {
            $.ajax({
                "type": "POST",
                "url": "/api/UpdateUser",
                "data": data,
                "contentType": "application/json; charset=utf-8"

            })
        }
        function DeleteUser(data) {
            $.ajax({
                "type": "POST",
                "url": "/api/User/Delete",
                "data": data,
                "contentType": "application/json; charset=utf-8"
            })
        }
    </script>

任何建议将不胜感激。 谢谢！

Answer 1

一种方法是给按钮一个新的标识类>我们可以删除按钮上的硬代码。 然后为按钮单击添加一个侦听器。

假设你的表格行的 HTML 在呈现时是这样的......

<tr>
    <td>Joan</td>
    <td>Doe</td>
    <td>Unknown</td>
    <td>Perplexed</td>
    <td data-id='123'>
        <button class='btn btn-primary btn-view' style=margin-right:5px;>View Details</button>
        <button class='btn btn-danger btn-delete' style=margin-right:5px;>Delete</button>"
    </td>
</tr>

所以听者变成了

$('body').on('click', '.btn-view', function(e){

    // get the data from the parent TD of the clicked button
    var id = $(this).parent().data('data-id');

    $.ajax({
        "type": "POST",
        "url": "/api/UpdateUser",
        "data": id,
        "contentType": "application/json; charset=utf-8"

    })
}

笔记：

1. 我在 ajax() 调用中传递 id 时偷工减料 - 我会让你来解决这个问题。
2. 点击格式使用事件委托——实际上意味着最终的父级（主体）正在侦听事件冒泡，从而使侦听器比我们在长表格中的每个按钮上都放置一个更有效。 参见事件委托： https : //learn.jquery.com/events/event-delegation/
3. 您可以对删除按钮采用相同的方法。
4. 您将节省相当数量的带宽，删除操作单元格中的重复代码。