C# MVC5 Razor查看jQuery数据表使用EditorFor分页检查项
我在使用MVC5的数据库时遇到问题。我使用datatbales显示和选择项目 整个过程都很好,只是当我尝试选择所有记录时,有更多的页面,只有第一个页面被选中。另一个问题是,如果我从第1页选择3个项目,从第2页选择2个项目,当我发布我的选择时,不会发布任何项目 以下是我的尝试:C# MVC5 Razor查看jQuery数据表使用EditorFor分页检查项,c#,jquery,asp.net-mvc-5,datatables,C#,Jquery,Asp.net Mvc 5,Datatables,我在使用MVC5的数据库时遇到问题。我使用datatbales显示和选择项目 整个过程都很好,只是当我尝试选择所有记录时,有更多的页面,只有第一个页面被选中。另一个问题是,如果我从第1页选择3个项目,从第2页选择2个项目,当我发布我的选择时,不会发布任何项目 以下是我的尝试: @model Project.Models.Demo @using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @id = "rform
@model Project.Models.Demo
@using (Html.BeginForm("Action", "Controller", FormMethod.Post, new { @id = "rform", @class = "form-horizontal" }))
{
@Html.AntiForgeryToken()
<table class="table table-striped table-bordered table-hover" id="elementstable">
<thead>
<tr role="row">
<th>
<label>
<input type="checkbox">
<span class="text"></span>
</label>
</th>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Address)
</th>
<th>
@Html.DisplayNameFor(model => model.Created)
</th>
</tr>
</thead>
<tbody>
@Html.EditorFor(model => model.Items)
</tbody>
</table>
以下是表格:
@Html.Bootstrap().SubmitButton().Text("Save").Color(BootstrapColors.Success).IconPrepend(FontAwesome.Check).HtmlAttributes(new { id = "ok" })
}
@section PageScripts{
<link href="~/assets/css/dataTables.bootstrap.css" rel="stylesheet" />
<script src="~/assets/js/datatable/jquery.dataTables.min.js"></script>
<script src="~/assets/js/datatable/ZeroClipboard.js"></script>
<script src="~/assets/js/datatable/dataTables.tableTools.min.js"></script>
<script src="~/assets/js/datatable/dataTables.bootstrap.min.js"></script>
<script src="~/assets/js/datatable/datatables-init.js"></script>
<script type="text/javascript">
var oTable = $('#elementstable').dataTable({
"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"aLengthMenu": [
[ -1],
[ "All"]
],
"iDisplayLength": -1,
"oTableTools": {
"aButtons": []
},
"language": {
"search": "",
"sLengthMenu": "_MENU_",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumns": [
{ "bSortable": false, "width": '45px' },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
],
"aaSorting": []
});
$('#elementstable thead th input[type=checkbox]').change(function () {
var set = $("#elementstable tbody tr input[type=checkbox]");
var checked = $(this).is(":checked");
$(set).each(function () {
if (checked) {
$(this).prop("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).prop("checked", false);
$(this).parents('tr').removeClass("active");
}
});
});
$('#elementstable tbody tr input[type=checkbox]').change(function () {
$(this).parents('tr').toggleClass("active");
});
</script>
}
正如我所提到的,这一次只适用于一页
问题:
选中所有行复选框,该复选框将从所有页面(而不仅仅是当前页面)中选择所有项目
选择单个行
从不同页面中选择单个行
将当前页面和其他页面中的所有选定项目作为列表发布到操作
@Html.Bootstrap().SubmitButton().Text("Save").Color(BootstrapColors.Success).IconPrepend(FontAwesome.Check).HtmlAttributes(new { id = "ok" })
}
@section PageScripts{
<link href="~/assets/css/dataTables.bootstrap.css" rel="stylesheet" />
<script src="~/assets/js/datatable/jquery.dataTables.min.js"></script>
<script src="~/assets/js/datatable/ZeroClipboard.js"></script>
<script src="~/assets/js/datatable/dataTables.tableTools.min.js"></script>
<script src="~/assets/js/datatable/dataTables.bootstrap.min.js"></script>
<script src="~/assets/js/datatable/datatables-init.js"></script>
<script type="text/javascript">
var oTable = $('#elementstable').dataTable({
"sDom": "Tflt<'row DTTTFooter'<'col-sm-6'i><'col-sm-6'p>>",
"aLengthMenu": [
[ -1],
[ "All"]
],
"iDisplayLength": -1,
"oTableTools": {
"aButtons": []
},
"language": {
"search": "",
"sLengthMenu": "_MENU_",
"oPaginate": {
"sPrevious": "Prev",
"sNext": "Next"
}
},
"aoColumns": [
{ "bSortable": false, "width": '45px' },
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
],
"aaSorting": []
});
$('#elementstable thead th input[type=checkbox]').change(function () {
var set = $("#elementstable tbody tr input[type=checkbox]");
var checked = $(this).is(":checked");
$(set).each(function () {
if (checked) {
$(this).prop("checked", true);
$(this).parents('tr').addClass("active");
} else {
$(this).prop("checked", false);
$(this).parents('tr').removeClass("active");
}
});
});
$('#elementstable tbody tr input[type=checkbox]').change(function () {
$(this).parents('tr').toggleClass("active");
});
</script>
}