控件上页码显示原理，以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);">&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);
    //}

 

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