分页效果图：
表格下面的分页按钮样式是我自己做的一个样式，这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 }
好啦！分页就到此结束啦！
原标题：MVC linq语法分页
关键词：linq
我知道了 