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