MVC+EF分页简单功能实现

成品展示

数据库：Role

功能实现

后台代码

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Com.t.Models;
namespace Com.t.Controllers
{
    public class RoleController : Controller
    {
        RbacDBEntities db = new RbacDBEntities();
        // GET: Role
        public ActionResult Index(int pageIndex = 1, int pageSize = 10, string Name = "")
        {

            //总记录数满足条件
            var counts = db.Roles.Where(p => p.Name.Contains(Name)).Count();
            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))//跳过多少条
                .Take(pageSize)//取多少条
                .ToList();//转化为集合
            ViewBag.pageIndex = pageIndex;
            ViewBag.totalPage = totalPage;
            ViewBag.Name = Name;
            ViewBag.pageSize = pageSize;
            return View(rows);

        }
    }
}

前台代码

@{
    ViewBag.Title = "Index";
}
@using Com.t.Models
@model List<Role>
<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>
                共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">

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

}