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_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     }

 

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