Javascript 如何将以下使用复选框all的datatable脚本代码改编为我的asp.net核心应用程序？

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

我希望我的一个数据表有一个“复选框all”，按下该复选框时，将标记表当前行中所有已筛选的现有复选框，并且我希望所有这些复选框都是分配了name属性的组的一部分。搜索时，我发现了一个已经制作好的脚本，它正是我想要的

这个：

但我很难理解我该如何将这个脚本适应我的应用程序环境。由于我使用的是一个模型而不是ajax/json？，并且与链接代码不同，我希望在表的每个td行中手动放置一个复选框，而不是像链接代码那样将它们显示在一个空的“td”中（我不完全理解代码是如何做到这一点的）

有人能帮我修改gyrocode的代码吗？事先非常感谢

我的视图代码没有gyrocode的jquery数据表脚本：

@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>

@model IEnumerable
列表
诺姆
费希
AAA
图乌
霍
米诺
@foreach（模型中的var项目）
{
@DisplayFor（modeleItem=>item.Nom）
@DisplayFor（modeleItem=>item.Fech）
@DisplayFor（modelItem=>item.Aombr）
@DisplayFor（modeleItem=>item.Tip）
@DisplayFor（modelItem=>item.Hor）
@DisplayFor（modelItem=>item.Tooo）

（PD：是的，我试图将我的表Id从“tabla”更改为“example”，但这还不足以使代码正常工作）
关于如何将gyrocode的代码应用到代码中，您可以检查以下代码。并且确保将
$（“#tabla”）.dataTable（{}）更改为
$（“#tabla”）.dataTable（{/code>）


函数updateDataTableSelectAllCtrl（表）{
var$table=table.table（）.node（）；
var$chkbox_all=$（'t正文输入[type=“checkbox”]，$table）；
var$chkbox_checked=$（'tbody input[type=“checkbox”]：checked'，$table）；
var chkbox_select_all=$（'thead input[name=“select_all”]，$table）.get（0）；
//如果未选中任何复选框
如果（$chkbox_checked.length==0）{
chkbox\u select\u all.checked=false；
如果在chkbox\u select\u all中有（'不确定'）{
chkbox\u select\u all.undeterminate=false；
}
//如果选中了所有复选框
}else if（$chkbox\u checked.length===$chkbox\u all.length）{
chkbox\u select\u all.checked=true；
如果在chkbox\u select\u all中有（'不确定'）{
chkbox\u select\u all.undeterminate=false；
}
//如果选中了某些复选框
}否则{
chkbox\u select\u all.checked=true；
如果在chkbox\u select\u all中有（'不确定'）{
chkbox\u select\u all.undeterminate=true；
}
}
}
$（文档）.ready（函数（）{
//包含选定行ID的数组
所选变量行数=[]；
var table=$（“#tabla”）.DataTable({
回答：是的，
按钮：[
“卓越HTML5”，
“csvHtml5”，
“pdfHtml5”
],
});
//处理单击复选框
$（'tabla tbody'）。在（'click'，'input[type=“checkbox”]”上，函数（e）{
var$row=$（this.closest（'tr'）；
//获取行数据
var data=table.row（$row）.data（）；
//获取行ID
var rowId=数据[0]；
//确定行ID是否在所选行ID列表中
变量索引=$.inArray（行ID，选定行）；
//如果选中复选框且行ID不在所选行ID列表中
if（this.checked&&index=-1）{
行\选定。推送（rowId）；
//否则，若未选中复选框且行ID位于选定行ID列表中，则
}否则如果（！this.checked&&index！=-1）{
所选行。拼接（索引，1）；
}
如果（选中此项）{
$row.addClass（'selected'）；
}否则{
$row.removeClass（'selected'）；
}
//更新“全选”控件的状态
更新的StatableSelectAllCtrl（表格）；
//防止单击事件传播到父级
e、 停止传播（）；
});
//使用复选框处理单击表格单元格
$（“#tabla”）。在（'click'、't body td，thead th:first child'上，函数（e）{
$（this）.parent（）.find（'input[type=“checkbox”]”）。trigger（'click'）；
});
//句柄单击“全选”控件
$（'thead input[name=“select_all”]”，table.table（）.container（））。在（'click'，函数（e）{
如果（选中此项）{
$（'#tabla t正文输入[type=“checkbox”]：未（：选中）。触发器（'click'）；
<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>