如何将以下使用复选框的数据表脚本代码调整到我的 asp.net 核心应用程序？

Question

最近，我在我的 Asp.net 应用程序中安装了 Datatable 库，非常有用！

我希望我的一个数据table有一个“全部复选框”，当按下它时，会标记 table 当前行中所有已过滤的现有复选框，并且我还希望所有这些复选框都属于一个分配了名称属性的组。在搜索时，我发现了一个现成的脚本，它可以满足我的需求！

这个：https://jsfiddle.net/gyrocode/abhbs4x8/

但我很难理解我到底应该如何使这个脚本适应我的应用程序环境。由于我使用模型而不是 ajax/json?，并且与 link 代码不同，我想在 table 的每个 td 行中手动放置一个复选框，而不是让它们出现在空“td”，正如 link 代码所做的那样（我不明白代码是如何做到的）。

有人可以帮助我将 gyrocode 制作的代码改编为我的应用程序吗？非常感谢您。

我的视图代码没有 gyrocode 的 jquery datable 脚本：

@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数据table：https://datatables.net/download/

（PD：是的，我试图将我的 table Id 从“tabla”更改为“example”，但这不足以使代码正常工作）

Answer 1

关于如何将 gyrocode 的代码应用到您的代码中，您可以查看以下内容 code.And 请务必将 $("#tabla").dataTable({}) 更改为 $("#tabla").DataTable({})：

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.js"></script>
<script>          
function updateDataTableSelectAllCtrl(table) {
    var $table = table.table().node();
    var $chkbox_all = $('tbody input[type="checkbox"]', $table);
    var $chkbox_checked = $('tbody input[type="checkbox"]:checked', $table);
    var chkbox_select_all = $('thead input[name="select_all"]', $table).get(0);

    // If none of the checkboxes are checked
    if ($chkbox_checked.length === 0) {
        chkbox_select_all.checked = false;
        if ('indeterminate' in chkbox_select_all) {
            chkbox_select_all.indeterminate = false;
        }

        // If all of the checkboxes are checked
    } else if ($chkbox_checked.length === $chkbox_all.length) {
        chkbox_select_all.checked = true;
        if ('indeterminate' in chkbox_select_all) {
            chkbox_select_all.indeterminate = false;
        }

        // If some of the checkboxes are checked
    } else {
        chkbox_select_all.checked = true;
        if ('indeterminate' in chkbox_select_all) {
            chkbox_select_all.indeterminate = true;
        }
    }
}

$(document).ready(function () {
    // Array holding selected row IDs
    var rows_selected = [];
    var table = $("#tabla").DataTable({

        responsive: true,

        buttons: [
            'excelHtml5',
            'csvHtml5',
            'pdfHtml5'
        ],
    });

    // Handle click on checkbox
    $('#tabla tbody').on('click', 'input[type="checkbox"]', function (e) {
        var $row = $(this).closest('tr');

        // Get row data
        var data = table.row($row).data();

        // Get row ID
        var rowId = data[0];

        // Determine whether row ID is in the list of selected row IDs 
        var index = $.inArray(rowId, rows_selected);

        // If checkbox is checked and row ID is not in list of selected row IDs
        if (this.checked && index === -1) {
            rows_selected.push(rowId);

            // Otherwise, if checkbox is not checked and row ID is in list of selected row IDs
        } else if (!this.checked && index !== -1) {
            rows_selected.splice(index, 1);
        }

        if (this.checked) {
            $row.addClass('selected');
        } else {
            $row.removeClass('selected');
        }

        // Update state of "Select all" control
        updateDataTableSelectAllCtrl(table);

        // Prevent click event from propagating to parent
        e.stopPropagation();
    });

    // Handle click on table cells with checkboxes
    $('#tabla').on('click', 'tbody td, thead th:first-child', function (e) {
        $(this).parent().find('input[type="checkbox"]').trigger('click');
    });

    // Handle click on "Select all" control
    $('thead input[name="select_all"]', table.table().container()).on('click', function (e) {
        if (this.checked) {
            $('#tabla tbody input[type="checkbox"]:not(:checked)').trigger('click');
        } else {
            $('#tabla tbody input[type="checkbox"]:checked').trigger('click');
        }

        // Prevent click event from propagating to parent
        e.stopPropagation();
    });

    // Handle table draw event
    table.on('draw', function () {
        // Update state of "Select all" control
        updateDataTableSelectAllCtrl(table);
    });
});
</script>