Question

我正在尝试使用自定义 CheckBox 列修改jQuery DataTable。我的要求是在表的每一行添加 CheckBox 并添加具有相应行复选框的click事件，因此每当我单击复选框时，它应显示相关的行详细信息或获取数据到数据库。我可以通过数据库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中添加复选框点击事件。因此，每当我点击复选框时，我都可以检索相应的行详细信息。

N.B ：我对此做了很少的研究，并检查 CheckBox 是否有一个名为 dt-checkboxes 的类。它是动态生成的。有没有什么方法可以满足我的要求，比如在复选框中分配唯一的ID，这里有点卡住了。这就是它的样子 - 足够简单：

Answer 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());
});

上面的代码段将为您提供已选择或取消选择的行的数据。

我forked your fiddle来演示它。

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

1 个答案: