如何解决如何从 JQuery DataTable 中获取选定的数据行
我正在实施 asp.net core 3.1 项目。我有一个视图，它有一个 JQuery 数据表，并且在它的所有记录附近，有一个复选框。我应该在我的视图中实现 3 个按钮，每个按钮对 DataTable 中的选定行都有一个特殊的操作。例如，如果用户选择一些记录并单击 button1，我希望所有这些选定的行都以模式显示给用户。到目前为止，我所尝试的是我可以获得所选项目，但我不知道如何在模式弹出窗口中记录每条产品名称、申请人名称和产品价格。这是我尝试过的：
@model IEnumerable<Dashboard.Models.myModel>
<head>
<link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" />
<link href="~/contents/Index.css" rel="stylesheet" type="text/css" />
<link href="~/css/DataTable/jquery.dataTables.css" rel="stylesheet" type="text/css" />
</head>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery/dist/jquery-ui.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/datatables.min.js"></script>
<script language="JavaScript" type="text/javascript" src="~/js/DataTable/DataTableCheckbox/dataTables.checkboxes.min.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#myDummyTable").DataTable({
'columnDefs': [
{
'targets': 0,"searching": false,'checkboxes': {
'selectRow': true
}
}
],'select': {
'style': 'multi'
},'order': [[1,'asc']],"pagingType": "full_numbers"
});
var oTable = $("#myDummyTable").dataTable();
$("#Button1").click(function () {
$("input:checkbox",oTable.fnGetNodes()).each(function () {
var tuisre = $(this).is(":checked");
if (tuisre) {
//var no = $(this).row( this ).data();
//var no = $(this).parent().prev().prev().val();
//alert("no:" + no + " is checked");
// Here I need to know how I can get the selected rows data and display them on a bootstrap modal popup
}
})
})
});
$('#request_layout').css({ "background-color": "rgb(50,149,155)" });
</script>
<div class="my-5 col-sm-12 p-4">
<table id="myDummyTable" class="table m-table mytable table-striped table-bordered mb-4">
<thead>
<tr id="headerrow">
<th>
</th>
<th>
Product Name
</th>
<th>
Applicant Name
</th>
<th>
Price
</th>
<th>
operations
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" />
</td>
<td>
@Html.DisplayFor(modelItem => item.ProductName)
</td>
<td>
@Html.DisplayFor(modelItem => item.ApplicantName)
</td>
<td>
@Html.DisplayFor(modelItem => item.ProductPrice)
</td>
<td>
<a onclick="showInPopup('@Url.Action("AddOrEdit","Productapplicants",new {id=item.Id},Context.Request.Scheme)','edit')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i>Edit</a>|
<a onclick="showInPopup('@Url.Action("Details",'Details')" class="btn btn-info text-white"><i class="fas fa-pencil-alt"></i>Details</a>|
<form asp-action="Delete" asp-route-id="@item.Id" onsubmit="return jQueryAjaxDelete(this)" class="d-inline">
<input type="submit" value="Delete" class="btn btn-danger" />
</form>
</td>
</tr>
}
</tbody>
</table>
</div>
<input id="Button1" type="button" value="button" />
解决方法
请检查以下代码。它使用 rows().nodes() 而不是旧的 fnGetNodes 方法，当您使用 $().DataTable() 构造函数（如我的代码中所做的那样）时，该方法不可用。
$(document).ready(function() {
var oTable = $("#myDummyTable").DataTable({
select: {
style: 'multi'
}
});
$("#Button1").click(function() {
$("input:checkbox",oTable.rows().nodes()).each(function() {
if ($(this).is(":checked")) {
var row = $(this).closest('tr');
// output to the console the row data
console.log(oTable.row($(row)).data());
}
});
});
});<link href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<div>
<div class="my-5 col-sm-12 p-4">
<table id="myDummyTable" class="table m-table mytable table-striped table-bordered mb-4">
<thead>
<tr id="headerrow">
<th></th>
<th>Product Name</th>
<th>Applicant Name</th>
<th>Price</th>
<th>operations</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>Beer</td>
<td>Smith</td>
<td>35</td>
<td>[buttons here ...]</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>Coke</td>
<td>Pam</td>
<td>22</td>
<td>[buttons here ...]</td>
</tr>
</tbody>
</table>
</div>
<input id="Button1" type="button" value="button" />
</div>版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
