MVC linq语法分页

分页效果图：

表格下面的分页按钮样式是我自己做的一个样式，这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="strMoHu">模糊查询条件</param>
 /// <param name="PageSize">页大小</param>
 /// <param name="CurPage">页码</param>
 /// <param name="intMenDianID">门店ID</param>
 /// <returns></returns>
 public ActionResult YuanGong_Load_MoHuChaXun(string strMoHu, 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(strMoHu) || tbYuanGong.YuanGongXingMing.Contains(strMoHu) || tbYuanGong.XingBie.Contains(strMoHu) || tbMenDian.GongZuoZhanMingCheng.Contains(strMoHu) || tbYuanGongZhuangTai.ShuXingMingXiMingCheng.Contains(strMoHu))
                             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_MoHuChaXun?strMoHu=" + $('#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();
     }

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