如何使用mvc模型从数据表的第二页传递复选框值

Question

我有一个使用html而不是Ajax方法定义的dataTable。通过复选框，我可以选择将保存到数据库中的项目，未选中的项目将被删除。奇怪的是，当我提交表单时，我无法从dataTable的第一页获得值，但第二页检查的项目没有通过。

<div class="table-responsive datatable-custom">
<table id="datatableWithCheckboxSelect" class="table table-lg table-borderless table-thead-bordered table-nowrap table-align-middle card-table"
data-hs-datatables-options='{
"order": [1, "asc"],
"columnDefs": [ {
"targets": [0, 6],
"orderable": false
} ],
"info": {
"totalQty": "#datatableWithPaginationInfoTotalQty"
},
"search": "#datatableSearch",
"entries": "#datatableEntries",
"pageLength": 8,
"isResponsive": false,
"isShowPaging": false,
"pagination": "datatablePagination"
}'>
<thead class="thead-light">
<tr>
<th class="table-column-pr-0">
<div class="custom-control custom-checkbox">
<input id="datatableWithCheckboxSelectAll" type="checkbox" class="custom-control-input" checked>
<label class="custom-control-label" for="datatableWithCheckboxSelectAll"></label>
</div>
</th>
<th>Company Name</th>
<th>Account Code</th>
<th>Rate Class</th>
<th>Rep Code</th>
<th>Rep Name</th>
<th></th>
</tr>
</thead>
<tbody class="font-size-1">
@for (int i = 0; i < Model.RepsActiveCustomerModelList.Count; i++)
{
<tr class="">
<td class="table-column-pr-0">
<div class="custom-control custom-checkbox">
@Html.CheckBoxFor(model => Model.RepsActiveCustomerModelList[i].IsChecked, new { id = Model.RepsActiveCustomerModelList[i].CustomerID, @class = "custom-control-input" })
@*<input name="check" type="checkbox" asp-for="@Model.RepsActiveCustomerModelList[i].IsChecked" checked class="custom-control-input" id="@Model.RepsActiveCustomerModelList[i].CustomerID">*@
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].IsChecked" asp-for="@Model.RepsActiveCustomerModelList[i].IsChecked" />
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].CustomerID" asp-for="@Model.RepsActiveCustomerModelList[i].CustomerID" />
<label class="custom-control-label" for="@Model.RepsActiveCustomerModelList[i].CustomerID"></label>
</div>
</td>
<td class="align-middle">
<a class="d-flex align-items-center">
<div class="avatar avatar-soft-primary avatar-circle">
<span class="avatar-initials">
@Model.RepsActiveCustomerModelList[i].CompanyName.Substring(0, 1)
</span>
</div>
<div class="ml-3">
<span class="d-block h5  mb-0">@Model.RepsActiveCustomerModelList[i].CompanyName</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].CompanyName" asp-for="@Model.RepsActiveCustomerModelList[i].CompanyName" />
</div>
</a>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span value="2" name="@Model.RepsActiveCustomerModelList[i].AccountCode">@Model.RepsActiveCustomerModelList[i].AccountCode</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].AccountCode" asp-for="@Model.RepsActiveCustomerModelList[i].AccountCode" />
</div>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span>@Model.RepsActiveCustomerModelList[i].RateClassDescription</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].RateClassDescription" asp-for="@Model.RepsActiveCustomerModelList[i].RateClassDescription" />
</div>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span>@Model.RepsActiveCustomerModelList[i].FWRepCode</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].FWRepCode" asp-for="@Model.RepsActiveCustomerModelList[i].FWRepCode" />
</div>
</td>
<td class="align-middle">
<div class="media align-items-center">
<span>@Model.RepsActiveCustomerModelList[i].RepName</span>
<input type="hidden" value="@Model.RepsActiveCustomerModelList[i].RepName" asp-for="@Model.RepsActiveCustomerModelList[i].RepName" />
</div>
</td>
<td class="align-middle">
<div class="hs-unfold">
<a class="js-hs-unfold-invoker btn btn-sm btn-white" href="javascript:;" data-hs-unfold-options="{
&quot;target&quot;: &quot;#[e-mail]ist[i].CustomerID&quot;,
&quot;type&quot;: &quot;css-animation&quot;
}" data-hs-unfold-target="#@Model.RepsActiveCustomerModelList[i].CustomerID" data-hs-unfold-invoker="">
Actions <i class="tio-chevron-down ml-1"></i>
</a>
<div id="[e-mail]ist[i].CustomerID" class="hs-unfold-content dropdown-unfold dropdown-menu dropdown-menu-sm dropdown-menu-right hs-unfold-content-initialized hs-unfold-css-animation animated hs-unfold-hidden" data-hs-target-height="145.078" data-hs-unfold-content="" data-hs-unfold-content-animation-in="slideInUp" data-hs-unfold-content-animation-out="fadeOut" style="animation-duration: 300ms;">
<a class="dropdown-item" href="@Url.Action("ContactList", "Customer", new { accountCode = Model.RepsActiveCustomerModelList[i].AccountCode })" data-toggle="tooltip" data-placement="top" title="Contacts">
<i class="fal fa-address-card mr-2"></i>Contacts
</a>
</div>
</div>
</td>
</tr>
}
</tbody>
@Html.HiddenFor(model => model.RateCycleID)
</table>
</div>

Answer 1

在表单提交时，将页面长度更改为-1，这将显示所有内容并提交模型。

@section Scripts{ 
<script>
function ChangeDataTableLength()
{
table = $('#datatableWithCheckboxSelect').DataTable({
retrieve: true
});
table.page.len(-1).draw();
}
</script>
}