分頁效果圖：
表格下面的分頁按鈕樣式是我自己做的一個樣式，這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 }
好啦！分頁就到此結束啦！