首页 > 代码库 > MVC中用Jquery、JS和Ajax 实现分页 存储过程是用mysql写的。
MVC中用Jquery、JS和Ajax 实现分页 存储过程是用mysql写的。
首先创建控制器，添加两个试图，一个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="http://www.mamicode.com/搜索" class="search" id="searchButton" />
</div>
<div id="list"></div>
</div>
<div id="container-bottom">
测试 © 2014
</div>
</div>
<div class="loading none">
<img src="http://www.mamicode.com/~/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="http://www.mamicode.com/确定" />
}
</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="http://www.mamicode.com/@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();
#endregion
public 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
begin
select COUNT(id) into _count from student;
select student.`name`,student.age,student.`password` from student LIMIT _paidex,_pageSize;
end;
else
begin
select 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
MVC中用Jquery、JS和Ajax 实现分页 存储过程是用mysql写的。