Recently, I installed the Datatable library in my Asp.net app, and is very useful!
I wanted one of my Datatables to have a "Checkbox all" that when pressed, would mark all the existing checkboxes in the current rows of the table which are filtered, and aslo I wanted that all these checkboxes were part of a group with a name attribute assigned. And when searching, I found a already-made Script that does just what I want!
This one: https://jsfiddle.net/gyrocode/abhbs4x8/
but I'm having a hard time trying to understand how the heck I should adapt this script to my app environment. Since I use a Model instead of ajax/json?, and unlike the link code, I want to put a checkbox manually in each column of my table, instead of making them appear in an empty , as the link code does (thing I don't understand exactly how the code does it).
Can someone help me adapt the code made by gyrocode to my app? Thank you very much in advance.
My view code:
@model IEnumerable<Co.Models.Com>
<div class="container">
<div class="card level-3">
<h3>List</h3>
<link rel="stylesheet" type="text/css" href="~/DataTables/datatables.min.css" />
<div>
<table class="table table-sm table-bordered select" id="tabla">
<thead class="thead-dark">
<tr>
<th><input name="select_all" value="1" type="checkbox"></th>
<th>
<div>Nomb</div>
</th>
<th>
<div>Fech</div>
</th>
<th>
<div>AAA</div>
</th>
<th>
<div>Tuuu</div>
</th>
<th>
<div>Hor</div>
</th>
<th>
<div>Mino</div>
</th>
<th><div></div></th>
<th>
</th>
<th><div></div></th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td><input name="group" value=@item.Id type="checkbox">
</td>
<td>
@Html.DisplayFor(modelItem => item.Nom)
</td>
<td>
@Html.DisplayFor(modelItem => item.Fech)
</td>
<td>
@Html.DisplayFor(modelItem => item.Aombr)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tip)
</td>
<td>
@Html.DisplayFor(modelItem => item.Hor)
</td>
<td>
@Html.DisplayFor(modelItem => item.Tooo)
</td>
<td>
<a class="btn btn-sm btn-primary" asp-action="Edit" asp-route-id="@item.Id">
EDIT
</a>
</td>
<td>
<a class="btn btn-sm btn-primary" asp-action="Details" asp-route-id="@item.Id">
DETAILS
</a>
</td>
<td>
<a class="btn btn-sm btn-danger" asp-action="Delete" asp-route-id="@item.Id">
DELETE
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
<script src="~/assets/js/jquery.min.js"></script>
<script type="text/javascript" src="~/DataTables/datatables.min.js"></script>
<script>
$("#tabla").dataTable({
responsive: true,
buttons: [
'excelHtml5',
'csvHtml5',
'pdfHtml5'
],
</scrip>
Jquery Datatable: https://datatables.net/download/
Aucun commentaire:
Enregistrer un commentaire