How get selected data rows from JQuery DataTable
How get selected data rows from JQuery DataTable
elenora
Posts: 23Questions: 10Answers: 0
Hi. I'm implementing asp.net core 3.1 project. I have a view that has a JQuey DataTable and near all of its records, there is a checkbox. I should implement 3 buttons in my view each of which has a special action for the selected rows from the DataTable. For instance, if users selects some of records and clicks on button1, I want all those selected rows being displayed to the user on a modal. Till now what I have tried is I could get the selected items but I don't know how I can get each record's ProductName, ApplicantName and ProductPrice data and display them on a modal popup. Here is what I have tried:
@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","Productapplicants",new {id=item.Id},Context.Request.Scheme)','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" />
This discussion has been closed.
Answers
Are you using the Select extension? If so, you can call
rows({selected: true}).data()to get the data for all selected rows.Colin
No I'm not using it. How can I use that?
This example here should get you going - it's also using a checkbox per line,
Colin