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

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

  • 相关阅读:
    第三次作业
    第二次作业
    第一次作业
    第五次作业
    第四次作业
    第三次作业
    刘存俊第二次作业
    数据压缩第一次作业
    第五次作业
    第四次作业
  • 原文地址:https://www.cnblogs.com/GX-LongQin/p/4540944.html
Copyright © 2020-2023  润新知