自定义 jQuery DataTable 以获取自定义 CheckBox 事件行明智答案

【问题标题】：Customize jQuery DataTable To Get Custom CheckBox Event Row Wise自定义 jQuery DataTable 以获取自定义 CheckBox 事件行明智
【发布时间】：2018-05-25 16:16:51
【问题描述】：

我正在尝试使用自定义 CheckBox 列修改 jQuery DataTable。我的要求是为表格的每一行添加一个 CheckBox 并使用相应的行复选框添加单击事件，因此每当我单击复选框时，它应该显示相关的行详细信息或获取数据到数据库。我可以通过Ajax 调用从数据库中获取数据并使用CheckBoxes 完成。我正在按照本教程进行操作，现在它工作正常：

jQuery DataTable with CheckBoxes

这是我到目前为止在后端所做的：

public JsonResult GetData()
{
   var result = db.Doctors.Select(c => new
   {
      FirstName = c.Firstname,
      LicenseNo = c.LicenseNo
   }).ToList();

   return Json(new { data = result }, JsonRequestBehavior.AllowGet);
}

在前端：

<link href="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.css" rel="stylesheet" />
<link href="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/css/dataTables.checkboxes.css" rel="stylesheet" />

<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="https://cdn.datatables.net/s/dt/dt-1.10.10,se-1.1.0/datatables.min.js"></script>
<script src="https://gyrocode.github.io/jquery-datatables-checkboxes/1.2.6/js/dataTables.checkboxes.min.js"></script>
<script>
    $(document).ready(function () {
        var table = $('#example').DataTable({
            "ajax": {
                url: '@Url.Action("GetData")',
                type: "get",
                datatype: "json",
                data: {}
            },

            "columnDefs": [
                   {
                       'targets': 0,
                       'checkboxes': {
                           'selectRow': true
                       }
                   }
            ],

            "columns": [
                { "data": "FirstName" },
                { "data": "FirstName" },
                { "data": "LicenseNo" }
            ],

            'select': {
                'style': 'multi'
            },
            'order': [[1, 'asc']]
        });
    });
</script>

<body>
    <div>
        <hr><br>
        <form>
            <table id="example" class="display" cellspacing="0">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>License No</th>
                    </tr>
                </thead>
            </table>
            <hr>
        </form>
    </div>
</body>

现在的问题是如何在jQuery DataTable 中添加复选框单击事件。因此，每当我单击复选框时，我都可以检索相应的行详细信息。

注意：我对此进行了少量研发，并检查了 CheckBox 是否被赋予了一个名为 dt-checkboxes 的类。它是动态生成的。有什么方法可以满足我的要求，比如为复选框分配唯一的 ID，有点卡在这里。这就是它的样子 - 很简单：

【问题讨论】：

您是否尝试过使用jQuery 循环来遍历复选框？
您无需为此提供Id。是什么阻止您使用 `dt-checkboxes` css 类选择器来连接复选框上的单击事件并进行 ajax 调用？
我猜，只要点击@Shyju 的单行，dt-checkboxes 类将适用于所有复选框。
是的。但是您的点击只发生在一个复选框上，$(this) 会给您。
而且你分享的代码根本不会渲染复选框！！！

标签： c# jquery asp.net-mvc datatables

【解决方案1】：

您可以在 select 和 deselect 事件上使用事件侦听器。

table.on( 'deselect', function ( e, dt, type, indexes ) {
   //get the row information for the row deselected.
   console.log(dt.row(indexes).data());
});
table.on( 'select', function ( e, dt, type, indexes ) {
   //get the row information for the row selected.
   console.log(dt.row(indexes).data());
});

上面的代码 sn-p 将为您提供选择或取消选择的行的数据。

我forked your fiddle来演示一下。

【讨论】：