控制页码显示原理,以10页码为例
代码如下:
<div class="fenye_div0"> @{ //当前页面 var pageNow = 1; //页面总数 var pageCount = 0; if (ViewData["page"] != null) { pageNow = Convert.ToInt32(ViewData["page"]); } pageCount = Convert.ToInt32(ViewData["pageCount"]); var proPage = pageNow <= 1 ? 1 : pageNow - 1; var nextPage = pageNow + 1 > pageCount ? pageCount : pageNow + 1; } <a id="fenye_pre" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@proPage',@proPage)" href=" javascript:void(0);">< 上一页</a> </div> @if (pageCount <= 10) { //如果总页数小于10,就全部显示 for (int i = 1; i <= pageCount; i++) { //如果是当前页,就显示动态的标记样式,循环输出每个页码,每次点击都要为请求页面传递一个页码 if (i == pageNow) { <div class="fenye_div1 fenye_active"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } else { <div class="fenye_div1"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } } } else if (pageNow + 4 >= pageCount) { //如果最大上限大于总页数,就只是显示最后十条 <div class="fenye_div6"><strong>...</strong></div> for (int i = pageCount - 9; i <= pageCount; i++) { if (i == pageNow) { <div class="fenye_div1 fenye_active"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } else { <div class="fenye_div1"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } } } else if (pageNow < 7) { //如果当前页码小于7,就只显示前十条 for (int i = 1; i <= 10; i++) { if (i == pageNow) { <div class="fenye_div1 fenye_active"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } else { <div class="fenye_div1"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } } <div class="fenye_div6"><strong>...</strong></div> } else { //如果没有达到上限值显示的是中间这些页面,比如页面一共10页码,就可以前四后五的显示,一共五页码就可以前三后二的显示,取中间页 <div class="fenye_div6"><strong>...</strong></div> for (int i = pageNow - 5; i <= pageNow + 4; i++) { if (i == pageNow) { <div class="fenye_div1 fenye_active"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } else { <div class="fenye_div1"><a href="javascript:void(0);" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@i',@i)">@i</a></div> } } <div class="fenye_div6"><strong>...</strong></div> } <div class="fenye_div0"><a id="fenye_next" onclick="MedicalCase.GetListByPage('@Url.Content("~/MedicalCase/GetMedicalImageCaseList?page=")@nextPage',@nextPage)" href=" javascript:void(0);">下一页 ></a></div> <div class="fenye_div7"> 共 @pageCount 页,到第 </div>
效果:
配合之前的MVC分页文章使用即可,另附JS版分页,逻辑思维大体相同
希望大家补充
//, ////根据关键字获得列表 pageIndex:当前页面 pageCount:一共页数 //GetPageIndex: function (strPageIndex, pageCount) { // //可显示数 // var pageNum = 10; // var pageIndex = parseInt(strPageIndex); // var pageNowStyle = pageIndex - 1 == 0 ? 1 : pageIndex - 1; // if (pageIndex == null || pageIndex == '') { // pageIndex = 1; // } // var pageHtml = '<div class="fenye_div0"><a id="fenye_pre" href="/MedicalCase/Index">< 上一页</a></div>'; // if(pageCount<=pageNum){ // for (var i = 1; i <= pageCount; i++) { // var ac = ""; // if (i == pageIndex) // { // ac = "fenye_active"; // } // pageHtml += '<div class="fenye_div1 ' + ac + '"><a href="javascript:void(0)" onclick=MedicalCase.pageChange(this)>' + i + '</a></div>'; // } // } // else if (pageIndex + 4 >= pageCount){ // pageHtml += ' <div class=\'fenye_div6\'><strong>...</strong></div>'; // for (var i = pageCount - 9; i <= pageCount; i++){ // var ac = ""; // if (i == pageIndex) { // ac = "fenye_active"; // } // pageHtml += '<div class="fenye_div1 ' + ac + '"><a href="javascript:void(0)" onclick=MedicalCase.pageChange(this)>' + i + '</a></div>'; // } // } // else if (pageIndex < 7) { // for (var i = 1; i <= 10; i++) { // var ac = ""; // if (i == pageIndex) { // ac = "fenye_active"; // } // pageHtml += '<div class="fenye_div1 ' + ac + '"><a href="javascript:void(0)" onclick=MedicalCase.pageChange(this)>' + i + '</a></div>'; // } // pageHtml += ' <div class=\'fenye_div6\'><strong>...</strong></div>'; // } // else { // pageHtml += ' <div class=\'fenye_div6\'><strong>...</strong></div>'; // for (var i = pageIndex - 5; i <= pageIndex + 4; i++) { // var ac = ""; // if (i == pageIndex) { // ac = "fenye_active"; // } // pageHtml += '<div class="fenye_div1 ' + ac + '"><a href="javascript:void(0)" onclick=MedicalCase.pageChange(this)>' + i + '</a></div>'; // } // } // pageHtml += ' <div class="fenye_div0"><a id="fenye_next " href="javascript:void(0)">下一页 ></a></div><div class="fenye_div7">共' + pageCount + ' 页,当前第<input id="fenye_curr" data-total=' + pageCount + ' type="text" value="1" size="1" /> <span id="fenye_form_span" style="color:rgb(127,127,127);">页</span></div>'; // $('.fenye_div').html(pageHtml); //}, //pageChange: function pageChange(name) { // var _this = name; // var pageIndex = $(_this).html(); // MedicalCase.GetPageIndex(pageIndex, 13, _this); //}
积累小的知识,才能成就大的智慧,希望网上少一些复制多一些原创有用的答案