MVC+EF分页查询

后台控制器

定义变量
pageIndex：定义为第n页，默认为1
pageSize：定义为一页有n条数据，默认为10；
ViewBag是动态类型,使用时直接添加属性赋值，将控制器的值传到前台

 public ActionResult Index(int pageIndex=1,int pageSize=10,string Name="")
        {
            //总记录数满足条件
            var counts = db.Roles.Where(p => p.Name.Contains(Name)).Count();
            //Math.Ceiling()将表总记录数除每页的条数，取比所得值大的最小整数
            //例如  3.1取4     5.7取6     8.5取9
            var totalPage = Math.Ceiling(counts*1.00/pageSize );
            //根据页面的条数名称查询
            var rows = db.Roles.Where(p => p.Name.Contains(Name))
                .OrderBy(p => p.ID)//排序
                .Skip(pageSize * (pageIndex - 1)) //Skip()跳过前n页
                .Take(pageSize)    //Take()显示n行
                .ToList();//转化为集合
            ViewBag.pageIndex = pageIndex;
            ViewBag.totalPage = totalPage;
            ViewBag.Name = Name ;
            ViewBag.pageSize = pageSize;
            return View(rows);
        }

前端页面

@using WebApplication1.Models

<div style="display:flex;justify-content:space-between">
    <div class="input-group">
        <label>名称</label>
        //@ViewBag.Name  页面跳转，刷新页面时文本框内文字不被重置
        <input type="text" id="txtCondName" value="@ViewBag.Name" />
        <input type="button" value="搜索" id="btnSearch" onclick=" page(1)"/>

    </div>
</div>

<table class="table table-bordered ">
    <thead>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@item.ID</td>
                <td>@item.Name</td>
                <td>@item.Remark</td>
            </tr>
        }
    </tbody>
</table>

<nav aria-label="Page navigation" style="display:flex;justify-content:space-between">
    <ul class="pagination">
        <li><a >
    共10页，第
    <input type="text" value=" 1" id="pageIndex" />页，每页显示
        <select id="pageSize" onchange="page(1)">
        @{
            var pageIndexs = new List<int> { 5, 10, 20, 50, 100 };
        }
        @foreach (var item in pageIndexs)
        {
            if (@ViewBag.pageSize == @item)
            {
                <option value="@item" selected="selected">@item</option>
            }
            else
            {
                <option value="@item" >@item</option>
            }

        }
       </select>
        条
</a></li>

    </ul>
    <ul class="pagination">
        //@ViewBag.pageIndex表示当前页面
        <li><a href="javascript:page(1);">首页</a></li>
        <li><a href="javascript:page(@ViewBag.pageIndex-1)">上页</a></li>
        <li><a href="javascript:page(@ViewBag.pageIndex+1)">下页</a></li>
        <li><a href="javascript:page(@ViewBag.totalPage)">末页</a></li>
        <li><input type="button" value="go" onclick="go(); " /></li>
    </ul>
</nav>

@section Scripts{
    
    <script>
        function page(pageindex) {
            var pageSize = $("#pageSize").val();
            var name= $("#txtCondName").val();
            window.location.href = "/role/index?pageindex="
                + pageindex + "&pageSize="+ pageSize + "&name="+ name 

        }

        function go() {
            var pageindex = $("#pageIndex").val();
            page(pageindex);
        }
    </script>

    }

THANKS