MVC分页

分页的优点

当我们的数据比较多时，讲所有的数据显示到一个页面就会导致观察繁琐，不容易找出自己想要看到的数据。所以采用分页展示，能将数据很好的展示出来，方便人们的查询和使用。

首先我们创建一个数据库，名叫‘RbacDB’，创建一个Roles表在vs 中创建mvc项目后，创建一个控制器。

 RbacDBEntities1 db = new RbacDBEntities1();
        // GET: Role
public ActionResult Index(string name = "",int pageIndex=1,int pageSize=2)
{
}

name：需要查找内容的名称，pageIndex：第几页，pageSize：每页数

控制器代码：

        public ActionResult Index(string name = "",int pageIndex=1,int pageSize=2)
        {
            //总记录数满足条件
            var counts = db.Roles.Where(p => p.Name.Contains(name)).Count();
            var totalPage =Math.Ceiling(counts * 1.0 / pageSize);
            //根据页码每页的条数名称查询
            var rows = db.Roles.Where(p => p.Name.Contains(name))
                .OrderBy(p => p.ID) //排序
                .Skip(pageSize * (pageIndex - 1))  //跳过
                .Take(pageSize) //取值
                .ToList();  //转化为集合  
            ViewBag.pageIndex = pageIndex;
            ViewBag.pageSize = pageSize;
            ViewBag.totalPage = totalPage;
            ViewBag.name = name;
            return View(rows);
        }

页面代码：

<div style="display:flex;justify-content:space-between">
    <div class="btn-group">
        <button type="button" class="btn btn-default">新增</button>
        <button type="button" class="btn btn-default">删除</button>
    </div>
    <div class="input-group">
        <label>名称</label>
        <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 href="#">共 @ViewBag.totalPage 页，第
            <input type="text" value="@ViewBag.pageIndex" id="pageIndex" style="width:100px;"/>
            页，每页显示
            <select id="pageSize" onchange="page(1);">
                @{
                    var pageIndexs = new List<int> { 5, 10, 20 };
                }
                @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">
        <li><a href="javascript:page(1)">首页</a></li>
        @if (ViewBag.pageIndex > 1)
        {
            <li><a href="javascript:page(@ViewBag.pageIndex-1)">上页</a></li>
        }
        else
        {
            <li class="disabled"><a href="#">上页</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>
//javaScript js代码
@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() {
            //获取pageIndex
            var pageindex = $("#pageIndex").val();
            page(pageindex);
        }
    </script>
}