自己动手写 ASP.NET MVC 分页 part1
学习编程也有一年半载了,从来没有自己动手写过东西,都是利用搜索软件找代码,最近偶发感慨,难道真的继续做码农???
突发奇想是不是该自己动手写点东西,可是算法、逻辑思维都太弱了,只能copy网上的代码,所有就从简单的写起,以后会不定期的推出!
下面是我本周业余时间写的 ASP.NET 分页,以不同的方式去实现最终的结果,先给大家看效果图
1、这是最满意的一个分页功能(看图片是不是特别像博客园首页的分页),并且是异步实现:
2、这个是最开始写的一个分页,按钮用的是button (见笑了):
3、这个是1的前身,从它修改过去的
好了效果看完了,得贴代码了(这里声明个事情:我用的是伪数据,如果想直接使用到项目中还的做少量的修改)
如果您发现有不合理的地方希望不腻赐教,小弟先在这里谢过您了!
首先把第一个分页效果的代码贴出来(2,3和1共享的代码我将会标注:1.2.3 共享<共享的代码后面的2.3我就不贴了>)
好了,屁话不说了,文笔不好(语文体育老师教的),将就着看吧 !
1.2.3 共享 定义一个分页类对象 HTMLPager
/// <summary> /// 分页类的属性 /// </summary> public class htmlPager { public int pageIndex { get; set; }//当前页 public int countTotal { get; set; }//总条数 public int pageBack {//上一页 get { if (pageIndex==0) { pageIndex = 0; } else { pageIndex -= 1; } return pageIndex; } } public int pageNext {//下一页 get { if (pageIndex == pageCount) { pageIndex = pageCount; } else { pageIndex += 1; } return pageIndex; } } public int pageSize//当前页第三条 { get { return 10; } } public int pageCount//总页数 { get { return (int)Math.Ceiling(countTotal / (double)pageSize); } } /// <summary> /// 分页类的属性 /// </summary> /// <param name="pageIndex">当前页</param> /// <param name="countTotal">总条数</param> public htmlPager(int pageIndex, int countTotal) { this.pageIndex = pageIndex; this.countTotal = countTotal; } }
1.2.3 共享 数据类
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 public class UserInfo 2 { 3 public string userName { get; set; } 4 public int userAge { get; set; } 5 public string userSex { get; set; } 6 public double userHeight { get; set; } 7 public double userWeight { get; set; } 8 }
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
public class getUserInfo { private static List<UserInfo> listUserInfo = new List<UserInfo>(); public static List<UserInfo> getInfo() { UserInfo ui1 = new UserInfo { userName = "小明", userAge = 21, userSex = "男", userHeight = 170, userWeight = 64 }; UserInfo ui2 = new UserInfo { userName = "张三", userAge = 23, userSex = "男", userHeight = 170, userWeight = 64 }; UserInfo ui3 = new UserInfo { userName = "美霖", userAge = 23, userSex = "女", userHeight = 170, userWeight = 64 }; UserInfo ui4 = new UserInfo { userName = "姜夏", userAge = 25, userSex = "男", userHeight = 170, userWeight = 64 }; UserInfo ui5 = new UserInfo { userName = "知鸟", userAge = 22, userSex = "男", userHeight = 170, userWeight = 64 }; UserInfo ui6 = new UserInfo { userName = "知鸟分页", userAge = 25, userSex = "女", userHeight = 170, userWeight = 64 }; UserInfo ui7 = new UserInfo { userName = "分页", userAge = 25, userSex = "男", userHeight = 170, userWeight = 64 }; for (int i = 0; i <2; i++) { listUserInfo.Add(ui1); listUserInfo.Add(ui2); listUserInfo.Add(ui3); listUserInfo.Add(ui4); listUserInfo.Add(ui5); listUserInfo.Add(ui6); listUserInfo.Add(ui7); } return listUserInfo; } }
1. 独有 action方法
public ActionResult pagehtml(int indexpage = 1) //主要是1的视图 { return View(); }
下面给出视图 pagehtml.cshtml 中的代码
1.2.3 共享 html代码
<html> <head> <title> 实现分页功能 </title> <style type="text/css"> body { font-size: 12px; font-family: Verdana, Arial, Helvetica, sans-serif; width: 60%;padding-left: 25px; } DIV.digg { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; MARGIN: 3px; PADDING-TOP: 3px; TEXT-ALIGN: center } DIV.digg A { BORDER-RIGHT: #aaaadd 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #aaaadd 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #aaaadd 1px solid; PADDING-TOP: 2px; BORDER-BOTTOM: #aaaadd 1px solid; TEXT-DECORATION: none } DIV.digg A:hover { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid } DIV.digg A:active { BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid } DIV.digg SPAN.disabled { BORDER-RIGHT: #eee 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #eee 1px solid; PADDING-LEFT: 5px; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #eee 1px solid; COLOR: #ddd; PADDING-TOP: 2px; BORDER-BOTTOM: #eee 1px solid } .current { BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 5px; FONT-WEIGHT: bold; PADDING-BOTTOM: 2px; MARGIN: 2px; BORDER-LEFT: #000099 1px solid; COLOR: #FAFAFA; PADDING-TOP: 2px; BORDER-BOTTOM: #000099 1px solid; BACKGROUND-COLOR: #000000; } </style> </head> <body> <div> <table id="testtable"> </table> </div> <div id="pageChangeID" class="digg"> </div> <input type="hidden" id="hiddenPage" value="1"/> <!--存储当前页的值--> </body> </html>
1. 独有 js代码
<script src="../../Scripts/jquery-1.8.3.min.js" type="text/javascript"></script> <script type="text/javascript"> window.onload = function () { $.ajax({ url: '/Home/pagehtmldata/', type: 'post', data: { indexpage: $("#hiddenPage").val() }, success: function (data) { var str = data.split('|-|-|'); $("#testtable").html(str[0]); $("#pageChangeID").html(str[1]); }
}); } function ChangePage(thisvalue) { var currentvalue = $(thisvalue).text(); var hiddenPage = $("#hiddenPage").val(); if (hiddenPage != currentvalue) {//判断点击的是否是上次的那一页 $("#hiddenPage").val(currentvalue); $(thisvalue).addClass('current'); $.ajax({ url: '/Home/pagehtmldata/', type: 'post', data: { indexpage: $(thisvalue).text() }, success: function (data) { var str = data.split('|-|-|'); $("#testtable").html(str[0]); $("#pageChangeID").html(str[1]); } }); } } function PrePage(thisvalue) { var prePage=$("#hiddenPage").val()-1; $("#hiddenPage").val(prePage); $.ajax({ url: '/Home/pagehtmldata/', type: 'post', data: { indexpage: prePage }, success: function (data) { var str = data.split('|-|-|'); $("#testtable").html(str[0]); $("#pageChangeID").html(str[1]); } }); } function NextPage(thisvalue) { var nextPage =parseInt($("#hiddenPage").val()) + 1; $("#hiddenPage").val(nextPage); $.ajax({ url: '/Home/pagehtmldata/', type: 'post', data: { indexpage: nextPage }, success: function (data) { var str = data.split('|-|-|'); $("#testtable").html(str[0]); $("#pageChangeID").html(str[1]); } }); } </script>
1. 独有 下面给出视图中js调用的的action 方法 :pagehtmldata
[HttpPost] public JsonResult pagehtmldata(int indexpage = 1) { string HTMLpage = "<thead><tr><th>序号</th><th>用户名</th><th>年龄</th> <th>性别</th><th>身高</th><th>体重</th></tr></thead> <tbody>"; List<UserInfo> userInfo = getUserInfo.getInfo();//数据来源 htmlPager hp = new htmlPager(Int32.Parse(indexpage.ToString()), userInfo.Count);//对来源数据进行分页 if (indexpage > hp.pageCount) { indexpage = hp.pageCount; } List<UserInfo> usData = userInfo.Skip((hp.pageIndex-1) * hp.pageSize).Take(hp.pageSize).ToList<UserInfo>();//分页后的数据,从0开始 for (int i = 0; i < usData.Count; i++) { HTMLpage += "<tr><td>" + i + "</td>" + "<td>" + usData[i].userName + "</td>" + "<td>" + usData[i].userAge + "</td>" + "<td>" + usData[i].userSex + "</td>" + "<td>" + usData[i].userHeight + "</td>" + "<td>" + usData[i].userWeight + "</td></tr>"; } HTMLpage += "</tbody>|-|-|";//|-|-| 用于分拆数据 前面是表格数据,后面是分页标签 HTMLpage += getpage(hp, indexpage);//分页html return Json(HTMLpage); }
1. 独有 pagehtmldata 中调用了 getpage(它是用来处理分页效果的实现)
public string getpage(htmlPager hp, int indexpage = 1) { string html = ""; string firstClassName = ""; if (indexpage==1) { firstClassName = " class='current'"; } string firstpage = " <a href='javascript:void(0)'" + firstClassName + " onclick='ChangePage(this)'>" + 1 + "</a>";//第一页 string omitpage = " <a href='javascript:void(0)'>...</a>";//省略的页 string prepage = "<a href='javascript:void(0)' onclick='PrePage(this)'><<</a>";//上一页 string nextpage = " <a href='javascript:void(0)' onclick='NextPage(this)'>>></a>";//下一页 string countpage = " <a href='javascript:void(0)' onclick='ChangePage(this)'>" + hp.pageCount + "</a>"; #region 当前为第 1 页时 if (indexpage==1) { if (hp.pageCount==1)//如果总页数 1 , 则不显示页数! { return html; } html += firstpage;//第一页 int pageCount=hp.pageCount; if (pageCount>5) { pageCount = 5; } for (int i = 2; i <= pageCount; i++) { string className = ""; if (i == indexpage) { className = "current"; } html += " <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>"; } if (hp.pageCount>5) { html += omitpage + countpage + nextpage; } } #endregion #region 当前页 <= 5 时 else if (indexpage<=5) { html += prepage + firstpage;//第一页 int pageCount = hp.pageCount; if (pageCount > 8) { switch (indexpage) { case 2: pageCount = 5; break; case 3: pageCount = 5; break; case 4: pageCount = 6; break; case 5: pageCount = 7; break; default: break; } } for (int i = 2; i <= pageCount; i++) { string className = ""; if (i == indexpage) { className = "current"; } html += " <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>"; } if (hp.pageCount > 5) { html += omitpage + countpage + nextpage; } } #endregion #region 当前页 >5 时 else { html += prepage + firstpage + omitpage;//第一页 int pageCount = hp.pageCount; if (indexpage+3<pageCount) { pageCount = indexpage + 3; } for (int i = indexpage-3; i <= pageCount; i++) { string className = ""; if (i == indexpage) { className = "current"; } html += " <a href='javascript:void(0)' class='" + className + "' onclick='ChangePage(this)'>" + i + "</a>"; } if (hp.pageCount > 5) { html += omitpage + countpage + nextpage; } } #endregion return html; }
对应另外2个分页 我直接把项目给打包了,如果你要看也是不错的,只是代码有点多,不易在项目中使用!
开发环境是VS2010 MVC4
望不腻赐教!
源码下载 :http://pan.baidu.com/s/1eQzYAiA
本篇为原创: 转载请注明出处知鸟 www.cnblogs.com/izhiniao 谢谢!