分页效果图：
表格下面的分页按钮样式是我自己做的一个样式，这4个按钮都是用同一张图片：
这张图片是用ps做的。
接下来我们说一下怎么去做这个样式
第一css代码：
._HomePage,._PreviousPage,._NextPage,._TrailerPage{ width:20px; height:20px; background:url(../images/paging.gif) no-repeat; border:none; display:block;}
._HomePage:hover{ opacity:0.7;filter : alpha(opacity:70);}
._PreviousPage:hover{ opacity:0.7;filter : alpha(opacity:70);}
._NextPage:hover{ opacity:0.7;filter : alpha(opacity:70);}
._TrailerPage:hover{ opacity:0.7;filter : alpha(opacity:70);}
._HomePage{ background-position: -7px -4px;}
._PreviousPage{ background-position: -33px -4px;}
._NextPage{ background-position: -62px -4px;}
._TrailerPage{ background-position: -88px -4px;}
._Skip{ width:30px;border:none; background:#f4f4f4;border:#95b8e7 solid 1px;}
._PageSize{ border:none; background:#f4f4f4; border:#95b8e7 solid 1px;}
._Totals{ color:#00F;}
第二html代码:
<div class="_Paging" id="_Paging">
<center>
<table class="_Layout">
<tr>
<td id="_Shop"></td>
<td><select id="RowCount" title="显示行数" onchange="ClickSelect()" >
<option value="10">10</option>
<option value="20" selected="selected">20</option>
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
<option value="60">60</option>
<option value="70">70</option>
<option value="80">80</option>
<option value="90">90</option>
<option value="100">100</option>
</select>
</td>
<td>|</td>
<td><a href="javascript:;" class="_HomePage" title="首页" onclick="ShouYe()"></a></td>
<td><a href="javascript:;" class="_PreviousPage" title="上一页" onclick="ShangYiYe()"></a></td>
<td><input class="_Skip" id="txtTiaoZhuan" title="回车跳转" onkeypress="TiaoZhuan(event)" onkeyup="value=value.replace(/[^\d]/g,'')
"onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" /></td>
<td>/<label id="lblZongYeShu"></label></td>
<td><a href="javascript:;" class="_NextPage" title="下一页" onclick="XiaYiYe()"></a></td>
<td><a href="javascript:;" class="_TrailerPage" title="尾页" onclick="WeiYe()"></a></td>
<td>|</td>
<td>
总记录数：<label class = "_Totals" id="lblZongJiLuShu"></label>条
</td>
</tr>
</table>
</center>
</div>
</div>
好啦，我们的样式已经做好啦!
分页的样式可以自己做啊，就算是用按钮代替也是可以的。
接下来我们去看看控制器的代码怎么写：
/// <summary>
/// 查询与分页（如果是只只执行分页，只需PageSize和CurPage这两个参数就够了）
/// </summary>
/// <param name="str*">模糊查询条件</param>
/// <param name="PageSize">页大小</param>
/// <param name="CurPage">页码</param>
/// <param name="intMenDianID">门店ID</param>
/// <returns></returns>
public ActionResult YuanGong_Load_*ChaXun(string str*, int PageSize, int CurPage, int intMenDianID)
{
var dtYuanGongDanAn = (from tbYuanGong in myMdl.sys_YuanGong
join tbMenDian in myMdl.sys_MenDian on tbYuanGong.MenDianID equals tbMenDian.MenDianID
join tbYuanGongZhuangTai in myMdl.sys_ShuXingMingXi on tbYuanGong.YuanGongZhuangTaiID equals tbYuanGongZhuangTai.ShuXingMingXiID
where tbYuanGong.YouXiaoFou == true && tbYuanGong.MenDianID == intMenDianID && (tbYuanGong.YuanGongBianHao.Contains(str*) || tbYuanGong.YuanGongXingMing.Contains(str*) || tbYuanGong.XingBie.Contains(str*) || tbMenDian.GongZuoZhanMingCheng.Contains(str*) || tbYuanGongZhuangTai.ShuXingMingXiMingCheng.Contains(str*))
orderby tbYuanGong.YuanGongID descending
select new
{
tbYuanGong.YuanGongID,
tbYuanGong.MenDianID,
tbYuanGong.YuanGongBianHao,
tbYuanGong.YuanGongXingMing,
tbYuanGong.XingBie,
tbYuanGong.YiDongShouJi,
tbYuanGong.JiaTingDianHua,
tbYuanGong.DiXin,
tbMenDian.GongZuoZhanMingCheng,
tbYuanGongZhuangTai.ShuXingMingXiID,
tbYuanGongZhuangTai.ShuXingMingXiMingCheng,
tbYuanGong.GengXinShiJian,
tbYuanGong.YouXiaoFou
}).AsEnumerable().Select((n, index) => new
{
YuanGongID = n.YuanGongID,
MenDianID = n.MenDianID,
YuanGongBianMa = n.YuanGongBianHao != null ? n.YuanGongBianHao.Trim() : "",
YuanGongXingMing = n.YuanGongXingMing != null ? n.YuanGongXingMing.Trim() : "",
XingBie = n.XingBie != null ? n.XingBie.Trim() : "",
YiDongShouJi = n.YiDongShouJi != null ? n.YiDongShouJi.Trim() : "",
JiaTingDianHua = n.JiaTingDianHua != null ? n.JiaTingDianHua.Trim() : "",
GongZi = n.DiXin != null ? n.DiXin.Trim() : "",
GongZuoDianPu = n.GongZuoZhanMingCheng != null ? n.GongZuoZhanMingCheng.Trim() : "",
YuanGongZhuangTaiID = n.ShuXingMingXiID,
YuanGongZhuangTai = n.ShuXingMingXiMingCheng != null ? n.ShuXingMingXiMingCheng.Trim() : "",
GengXingShiJian = n.GengXinShiJian != null ? n.GengXinShiJian.Value.ToString("yyyy-MM-dd HH:mm:ss") : null,
YouXiaoFou = n.YouXiaoFou,
order = index +
});
int ZongJiLuShu = dtYuanGongDanAn.Count();
if (CurPage > )//在分页前加条件判断
{ //Take是从序列的开头返回指定数量的连续元素，也就是说()里面放的数是多少就返回多少条数据
//Skip是跳过序列中指定的元素，返回剩余的，也就是说()里面放的数是多少，它就跳过多少
dtYuanGongDanAn = dtYuanGongDanAn.Take(PageSize * CurPage).Skip(PageSize * (CurPage - ));//进行分页
}
var jsonMap = new Dictionary<string, object>();//实例化容器
jsonMap.Add("total", ZongJiLuShu);//返回一共存在多少行数据
jsonMap.Add("rows", dtYuanGongDanAn);//返回分页数据
return Json(jsonMap, JsonRequestBehavior.AllowGet);
}
说白了分页就一句代码：
//Take是从序列的开头返回指定数量的连续元素，也就是说()里面放的数是多少就返回多少条数据
//Skip是跳过序列中指定的元素，返回剩余的，也就是说()里面放的数是多少，它就跳过多少
dtYuanGongDanAn = dtYuanGongDanAn.Take(PageSize * CurPage).Skip(PageSize * (CurPage - ));//进行分页
我们再来看看刚刚写的那些控件要触发什么方法：
第一我们先要定义一个变量，这个变量表示的就是页码：
var CurPage = 1;
第二我们看看查询的方法怎么写：
function ChaXun() {
$.getJSON("/JiChuZiLiao/YuanGong_Load_*ChaXun?str*=" + $('#txtChaXunNeiRong').val()
+ "&" + "PageSize=" + document.getElementById('RowCount').value//获取一页显示多少行
+ "&" + "CurPage=" + CurPage
+ "&" + "intMenDianID=" + MenDianID,
function (data) {
$("#lblZongYeShu").html(function () {
if (data["rows"].length == 0) {
CurPage = 0;
$('#lblZongJiLuShu').html(0);
return 0;
}
else {
$('#lblZongJiLuShu').html(data["total"]);
return Math.ceil(data["total"] / document.getElementById('RowCount').value);
}
});
$('#txtTiaoZhuan').val(CurPage);
$('#tbYuanGongDanAn').datagrid('loadData', data);
});
}
接下来就是分页功能的代码了：
//下一页
function XiaYiYe() {
if ($("#lblZongYeShu").html() <=CurPage) {
alert("已到最后一页");
return;
}
CurPage++;
ChaXun();
}
//上一页
function ShangYiYe() {
if (1 >= CurPage) {
alert("已到第一页");
return;
}
CurPage--;
ChaXun();
}
//首页
function ShouYe() {
if(CurPage == 1){
alert("当前页已是首页");return;
}
CurPage = 1;
ChaXun();
}
//尾页
function WeiYe() {
if (CurPage == $("#lblZongYeShu").html()){
alert("当前页已是尾页");return;
}
CurPage = $("#lblZongYeShu").html();
ChaXun();
}
//跳转
function TiaoZhuan() {
if(event.keyCode != 13){return;}
if ($("#txtTiaoZhuan").val() == "") {
alert("请输入您要跳转的页数"); return;
}
if (Number($.trim($("#txtTiaoZhuan").val())) > Number($.trim($("#lblZongYeShu").html()))) {
alert("您输入的页数大于当前总页数");
$("#txtTiaoZhuan").val('');
return;
}
if (Number($.trim($("#txtTiaoZhuan").val())) <= 0) {
alert("您输入的页数应大于零");
$("#txtTiaoZhuan").val('') ;
return;
}
CurPage = $("#txtTiaoZhuan").val();
ChaXun();
}
function ClickSelect(){
CurPage=1;
ChaXun();
}
好啦！分页就到此结束啦！