jquery 数据表操作按钮

Question

谁能帮助我了解在 jquery 数据表的每一行中添加操作按钮（如编辑、删除）的最佳方法？

我浏览了一些链接，但没有找到解决方案。

$(document).ready(function () {

    $.ajax({
        url: '@Url.Action("GetStudentGridData", "UserManagement")',
        type: "GET",
        dataType: 'json',
        success: function (data) {
            $('#student-datatable').DataTable({
                data: data,
                aoColumns: [
                    { mData: "FirstName" },
                    { mData: "Class" },
                    { mData: "Roll" },
                    { mData: "PresentAddress" },
                    { mData: "BloodGroup" },
                    { mData: "RegisterDate" },
                    {
                        mRender: function (data, type, full) {
                            return '<a href="@Url.Action("Edit","Users")?id=' + data + '" class="editUser">Edit</a>';
                        }
                    }

                ]

            });
        },
        error: function () {
            alert("An error has occured!!!");
        }
    });
});

这是我用来渲染数据表的js代码。每行都有一个学生详细信息，在我的返回“数据”对象中，我有 studentID 属性。当用户连续单击“编辑”按钮时，我想使用该学生 ID 获取数据。

请帮助我了解如何呈现编辑和删除按钮以及如何处理它们。

解决方案： 我尝试了一种新方法。我没有使用 datatable 属性呈现列，而是在 html 中添加了按钮

<table id="student-datatable" class="table table-striped table-bordered table-hover table-highlight table-checkable" cellspacing="0">
<thead>
    <tr>

        <th>Name</th>
        <th>Class</th>
        <th>Roll</th>
        <th>PresentAddress</th>
        <th>Blood Group</th>
        <th>Register Date</th>
        <th>Action</th>
    </tr>
</thead>

<tbody>
    @{
        foreach (var cl in Model)
        {

            <tr>
                <td>@cl.FirstName @cl.LastName</td>
                <td>@cl.Class</td>
                <td>@cl.Roll</td>
                <td>@cl.PresentAddress</td>
                <td>@cl.BloodGroup</td>
                <td>@cl.RegisterDate</td>
                <td>
                    <div >
                        <button type="button" class="btn btn-default edit-student-btn" data-student-id="@cl.StudentID"><i class="fa fa-edit"></i></button>
                        <button type="button" class="btn btn-default"><i class="fa fa-trash"></i></button>
                    </div>
                </td>
            </tr>
        }
    }
</tbody>

那我只调用jquery datatable方法。

$(document).ready(function () {

    $('#student-datatable').DataTable();
});

这给了我很好的输出：

Answer 1

在这种情况下，您必须将event delegation 用于动态添加的元素。

事件委托允许我们将单个事件侦听器附加到 父元素，它将为匹配的所有后代触发 选择器，这些后代是现在存在还是被添加到 未来。

您应该使用 .on() 方法绑定点击事件处理程序。

$(document).on('click','.editUser',function(){
    var studentID=$(this).closest('tr').find('td').eq(6).html();
});