MVC框架实现分页效果

一，数据库

二，视图

<div class="input-group">
    <label>名称:</label>
    <input type="text" class="form-control" id="txtCondName" value="@ViewBag.name" />
    <input type="button" id="btnSearch" value="搜索" οnclick="page(1)" />
</div>
<table class="table table-bordered">
    <thead>
        <tr>
            <th>编号</th> 
            <th>名称</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <th>@item.ID</th>
                <th>@item.Name</th>
                <th>@item.Remark</th>
            </tr>
            }
    </tbody>
</table>
<nav aria-label="...">
    <ul class="pagination">
        <li class="page-item ">
            共 @ViewBag.totalPage 页,
            第<input type="number" min="1" max="" id="pageIndex" value="@ViewBag.pageIndex" />,
            每页显示
            <select id="pageSize" onchange="page(1)">
                 @{
                     var listPageSize = new List<int> { 5, 10, 20, 50 };
                 }
                 @foreach (var item in listPageSize)
                 {
                 if (@ViewBag.pageSize == item)
                     {
                         <option value="@item" selected="selected">@item</option>
                     }
                     else
                     {
                         <option value="@item">@item</option>
                     }
                 }
                 </select>
            条
        </li>
    </ul>
    <ul class="pagination">
        <li class="page-item ">
            <a class="page-link" href="javascript:page(1)" tabindex="-1" aria-disabled="true">首页</a>
        </li>
        <li class="page-item"><a class="page-link" href="javascript:page(@ViewBag.pageIndex-1)">上页</a></li>
        <span class="btn btn-default">当前页为 @ViewBag.pageIndex</span>
        <li class="page-item active" aria-current="page">
            <a class="page-link" href="javascript:page(@ViewBag.pageIndex+1)">下页 </a>
        </li>
        <li class="page-item">
            <a class="page-link" href="javascript:page(@ViewBag.totalPage)">末页</a>
        </li>
        <li class="page-item">
            <input type="button" class="page-link" value="GO" onclick="page(2)" />
        </li>
    </ul>
</nav>
@section scripts{
    <script>
    function page(pageIndex) {
            var name = $("#txtCondName").val();
            var pageSize = $("#pageSize").val();
            window.location.href = "/role/index?pageindex=" + pageIndex + "&pageSize=" + pageSize+"&name="+name;
}
        function go() {
            var pageIndex = $("#pageIndex").val();
            page(pageIndex);
        }
        </script>
            }

三，控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Com.Fengsl.page.Models;
namespace Com.Fengsl.page.Controllers
{
    public class RoleController : Controller
    {
        RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index(int pageIndex=1,int pageSize=10,string name="")
        {
            //获取总记录数
            var totalRows = db.Roles.Count();
            //计算总页数
            var totalPage = Math.Ceiling(totalRows * 1.00 / pageSize);
            ViewBag.totalPage = totalPage;
            var roles = db.Roles.Where(p=>p.Name.Contains(name))
                .OrderBy(p=>p.ID)  //排序
                .Skip((pageIndex-1) * pageSize)    //跳过
                .Take(pageSize)   //取
                .ToList();
                ViewBag.pageIndex = pageIndex;
            ViewBag.name = name;
            ViewBag.pageSize = pageSize;
            return View(roles);
        }
    }
}