我正在尝试使用自定义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，有点卡在这里。这就是它的样子 - 足够简单:
最佳答案
您可以在 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来演示它。
关于c# - 自定义 jQuery DataTable 以获取自定义复选框事件行明智，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50533272/