你的位置:首页 > ASP.net教程

[ASP.net教程]MVC linq语法分页

分页效果图:

 

表格下面的分页按钮样式是我自己做的一个样式,这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_YuanGong12               join tbMenDian in myMdl.sys_MenDian on tbYuanGong.MenDianID equals tbMenDian.MenDianID13               join tbYuanGongZhuangTai in myMdl.sys_ShuXingMingXi on tbYuanGong.YuanGongZhuangTaiID equals tbYuanGongZhuangTai.ShuXingMingXiID14               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 descending16               select new17               {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.YouXiaoFou31               }).AsEnumerable().Select((n, index) => new32               {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 + 147               });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   }

 

好啦!分页就到此结束啦!