首先创建控制器,添加两个试图,一个Index 一个List 这里我用的是mysql
Index.cshtml 代码 :
@{
Layout = null;}<!DOCTYPE html>
<html>
<head> <meta name="viewport" content="width=device-width" /> <title>Index</title> @Styles.Render("~/Content/CSS/Home")@*样式*@ @Scripts.Render("~/bundles/jquery")@*这里引用了Jquery*@ @Scripts.Render("~/Scripts/JS/Renkefen_Fenye")@*JS*@</head><body> //样式可以自己调 <div id="container"> <div id="container-top"> <div style="float:left">测试项目</div> <div style="color:gray;float:left;font-size:15px;">分页列表展示</div> <div id="container-map"> <div style="margin:0 5px;color:white;">系统>列表分页</div> </div> </div> <div id="main" style="height:500px;"> <div style="margin:10px auto"> <input type="text" value="" class="textinput" id="userName" /> <input type="button" value="搜索" class="search" id="searchButton" /> </div> <div id="list"></div> </div> <div id="container-bottom">测试 © 2014 </div> </div> <div class="loading none"> <img src="~/Content/IMG/loading.gif" /> </div> <input type="hidden" id="pageIndexHidden" /></body></html>
List.cshtml 代码:
@using Person.Models
<div> <div> <div id="pagerDiv" style="float:right; margin-top:-30px;"> <span style=" width: 120px; height: 25px; margin-left: 10px"></span> <span style=" width: 120px; height: 25px; color: red; ">@ViewBag.PageIndex</span> <span style=" width: 120px; height: 25px; ">/</span> <span style=" width: 120px; height: 25px; ">@ViewBag.PageCount</span> </div> @ShowPagerList() <div id="list-pager" class="page mt20 fr"> @if (ViewBag.List != null) @*当没有搜索到用户的时候,隐藏页码条*@ { @Html.Raw(ViewBag.PagerHtml) <span>跳转到</span> <input type="text" class="page_shuru" id="pageText" /> <input type="button" class="page_bt ml5" id="sureButton" value="确定" /> }</div>
@helper ShowPagerList(){ var list = ViewBag.List as List<UserModel>; if (list != null) { foreach (var item in list) { <div class="list-item"> <div style="height:10%;margin: 15px 0"> <span>基本信息:</span> </div> <div style="height:20%;"> <span>用户名:</span> <span>@item.Name</span> </div> <div style="height: 20%"> <span>密码:</span> <span>@item.Password</span> </div> </div> } } else {@*这里有一个小功能 当没有搜索到用户的时候,隐藏页码条显示暂无数据!*@
<span>暂无数据!</span> <script type="text/javascript"> $("#pagerDiv").css("display", "none"); </script> }} </div> <input type="hidden" id="pageCountHidden" value="@ViewBag.PageCount" /></div>JS代码:
//页面加载
$(function () { pager(Path.href, 1); //搜索按钮点击事件 $("#searchButton").click(function () { pager(Path.href, 1); }); //跳转按钮点击事件$("#sureButton").live('click', function () {
var pageIndex = $.trim($("#pageText").val()); var pageCount = $("#pageCountHidden").val(); var regNum = /^\d*$/;if (parseInt(pageIndex) >= parseInt(pageCount)) {
//给隐藏字段赋值,存储要跳转的目标页面 $("#pageIndexHidden").val(pageCount); pager(Path.href, pageCount); return; } else if (parseInt(pageIndex) <= 1 || !regNum.test(pageIndex)) { $("#pageIndexHidden").val('1'); pager(Path.href, 1); return; } $("#pageIndexHidden").val(pageIndex); pager(Path.href, pageIndex);});
});//变量
//path 路径实体var Path = { "href": "/RenKeFenDemo/List" };//下一页
//href:跳转的页面Controller/Action/参数//pageindex:当前页码//pagecount:页容量function nextPager(href, pageindex, pagecount) { if (pageindex > pagecount) { pageindex = pagecount; } else { pageindex = pageindex + 1; } pager(href, pageindex);}//上一页//href:跳转的页面Controller/Action/参数//pageindex:当前页码function upPager(href, pageindex) {if (pageindex < 1) {
pageindex = 1; } else { pageindex = pageindex - 1; } pager(href, pageindex);}//通用分页click
//href:跳转的页面Controller/Action/参数//pageindex:当前页码function pager(href, pageindex) { var userName = $("#userName").val(); g_loading(); $("#list").load(href, { "pageIndex": pageindex, "userName": userName }, function () { $("#pageText").val($("#pageIndexHidden").val()); $("#pageIndexHidden").val(''); g_closeloading(); });}//打开等待
function g_loading() { $(".loading").show();}//关闭等待
function g_closeloading() { $(".loading").hide();}
Controller:
public class RenKeFenDemoController : Controller
{#region 变量区域
// GET: /RenKeFenDemo/ UserBLL userBll = new UserBLL(); #endregionpublic ActionResult Index()
{ return View(); } //返回显示列表 public ActionResult List(int pageIndex, string userName) { try { //页容量 var pageSize = 3; //总页数 var pageCount = 0; //调用查询并返回pageCount var list = userBll.GetStudentPager(pageIndex, pageSize, userName, out pageCount); //创建BuilderPager对象 var pager = new BuilderPager { PageIndex=pageIndex, PageSize=pageSize, PageCount=pageCount, Path = "/RenKeFenDemo/List", BiaoQian="a", CommonClickName="pager", XiaYiYeClickName = "nextPager", ShangYiYeClickName = "upPager", DangQianYeClassName = "page_curr" }; //生产HTML页 pager.BuilderHTML(); //将当前页码和页容量传递到视图上显示 ViewBag.PagerHtml = pager.PagerHTML; ViewBag.PageCount = pageCount; ViewBag.PageIndex = pageIndex; ViewBag.List = list; return View(); } catch { //记录日志 return RediectURL(); } }//跳转错误页面
private ActionResult RediectURL() { return View("~/Views/Shared/Error.cshtml"); }}
mysql 存储过程 这里用的navicat
begin
declare _paidex int default 0;declare _count int default 0;set _paidex=(_pageIndex-1)*_pageSize;if(_userName='') then
beginselect COUNT(id) into _count from student;select student.`name`,student.age,student.`password` from student LIMIT _paidex,_pageSize;end;elsebeginselect COUNT(id) into _count from student where student.`name` like CONCAT("%",_userName,"%");select student.`name`,student.age,student.`password` from student where student.`name` like CONCAT("%",_userName,"%") limit _paidex,_pageSize; end;end if;set _pageCount=CEILING(_count*1.0/_pageSize);end