dimanche 7 février 2021

How can I adapt the following datatable script code which uses checkbox all to my asp.net core app?

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