控件上页码显示原理，以10页为例

Posted 2020-07-20 加德满都的风铃

代码如下：

<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);">&lt; 上一页</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);">下一页 &gt;</a></div>
            <div class="fenye_div7">
                共 @pageCount  页，到第
            </div>

 

//,
    ////根据关键字获得列表 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">&lt; 上一页</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)">下一页 &gt;</a></div><div class="fenye_div7">共\' + pageCount + \' 页，当前第<input id="fenye_curr" data-total=\' + pageCount + \' type="text" value="1" size="1" /> &nbsp;<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);
    //}

 

积累小的知识，才能成就大的智慧