JS分页

调用：

?

varpageChange = function(index) {

           var html = pager("divid", index, 5, 1000, pageChange, { showGoTo:false, showFirst:false });

        }

实现：

?

pager = function (divPager, pageIndex, pageSize, totalCount, pageChange, opt) {

     var theOpt = {

         barSize: 5, //分页条显示的页码数  

         barTemplate: "{bar}  共{totalPage}页{totalCount}条 {goto}",//显示模板

         autoHide: true,//是否自动隐藏

         showFirst: true,//在totalPage>barSize时是自动否显示第一页链接

         showLast: true,//在totalPage>barSize时是自动否显示最后一页链接

         showGoTo: true,//是否显示GoTo

         autoHideGoTo: true//如果太少是否自动隐藏GoTo

     };

     if (opt) {

         if (opt.barSize)

            theOpt.barSize = opt.barSize;

         if (opt.barTemplate)

            theOpt.barTemplate = opt.barTemplate;

         if (opt.autoHide ==false)

            theOpt.autoHide = false;

         if (opt.showFirst ==false)

            theOpt.showFirst = false;

         if (opt.showLast =false)

            theOpt.showLast = false;

         if (opt.showGoTo ==false)

            theOpt.showGoTo = false;

         if (opt.autoHideGoTo ==false)

            theOpt.autoHideGoTo = false;

     }

     var handles = window.myPagerChanges = (function(x) { returnx; } (window.myPagerChanges || {}));

     if (!myPagerChanges[divPager]) myPagerChanges[divPager] = pageChange;

     var startPage = 0; //分页条起始页

     var endPage = 0;   //分页条终止页

     var showFirst =true;

     var showLast =true;

     if (isNaN(pageIndex)) {

         pageIndex = 1;

     }

     pageIndex = parseInt(pageIndex);

     if (pageIndex <= 0)

         pageIndex = 1;

     if (pageIndex * pageSize > totalCount) {

         pageIndex = Math.ceil(totalCount / pageSize);

     }

     if (totalCount == 0) {//如果没数据

         document.getElementById(divPager).innerHTML = "";

         return "";

     }

     var totalPage = Math.ceil(totalCount / pageSize);

     if (theOpt.autoHide && totalCount <= pageSize) {  //自动隐藏

         document.getElementById(divPager).innerHTML = "";

         return "";

     }

     if (totalPage <= theOpt.barSize) {

         startPage = 1;

         endPage = this.totalPage;

         theOpt.showLast = theOpt.showFirst = false;

     }

     else {

         if (pageIndex <= Math.ceil(theOpt.barSize / 2)) {//最前几页时

            startPage = 1;

            endPage = theOpt.barSize;

            theOpt.showFirst = false;

         }

         else if(pageIndex > (totalPage - theOpt.barSize / 2)) { //最后几页时

            startPage = totalPage - theOpt.barSize + 1;

            endPage = totalPage;

            theOpt.showLast = false;

         }

         else {                                         //中间的页时

            startPage = pageIndex - Math.ceil(theOpt.barSize / 2) + 1;

            endPage = pageIndex + Math.floor(theOpt.barSize / 2);

         }

         if (totalPage <= (theOpt.barSize * 1.5)) {

            theOpt.showLast = theOpt.showFirst = false;

         }

     }

     function _getLink(index, txt) {

         if (!txt) txt = index;

         return "<a href='javascript:;' style='margin: 2px 5px;border: 1px solid #6d8cad;color: #0269BA;padding: 2px 5px;text-decoration: none;' onclick='myPagerChanges[\""+ divPager + "\"]("+ index + ")'>"+ txt + "</a>";

     }

     var barHtml =""; //分页条

     barHtml += pageIndex == 1 ? "": _getLink(pageIndex - 1, "上一页");

     if (theOpt.showFirst) {

         barHtml += _getLink(1) + "<span>...</span>";

     }

     for (varindex = startPage; index <= endPage; index++) {

         if (index == pageIndex) {

            barHtml += "<span style='color:red;font-weight:blod; '>"+ index + "</span>";

         }

        else {

            barHtml += _getLink(index);

        }

     }

     if (theOpt.showLast) {

        barHtml += "<span>...</span>"+ _getLink(totalPage);

     }

     barHtml += pageIndex == totalPage ? "": _getLink(pageIndex + 1, "下一页");

     var gotoHtml =""; //goto框及按钮

     if (theOpt.showGoTo && theOpt.barTemplate.indexOf("{goto}") > 0) {

        if ((theOpt.autoHideGoTo && totalPage > 15) || theOpt.autoHideGoTo == false) {

            var txtid = divPager + "_goIndex";

            var indexVal = "document.getElementById(\""+ txtid + "\").value";

            gotoHtml += "<input type='text' onkeypress='if(event.keyCode==13){myPagerChanges[\""+ divPager + "\"]("+ indexVal + ")}' id='"+ txtid + "' value="+ pageIndex + " style='width:30px'>";

            gotoHtml += " <input type='button' class='page_bg' value='go' onclick='myPagerChanges[\""+ divPager + "\"]("+ indexVal + ")'>";

        }

     }

     //替换模板

     var pagerHtml = theOpt.barTemplate.replace("{bar}", barHtml)

                              .replace("{totalCount}", totalCount)

                              .replace("{pageIndex}", pageIndex)

                              .replace("{totalPage}", totalPage)

                              .replace("{goto}", gotoHtml);

     document.getElementById(divPager).innerHTML = pagerHtml;

     return pagerHtml;

};