C# MVC5 Razor查看jQuery数据表使用EditorFor分页检查项

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

我在使用MVC5的数据库时遇到问题。我使用datatbales显示和选择项目

整个过程都很好,只是当我尝试选择所有记录时,有更多的页面,只有第一个页面被选中。另一个问题是,如果我从第1页选择3个项目,从第2页选择2个项目,当我发布我的选择时,不会发布任何项目

以下是我的尝试:

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