javascript分页代码实例分享(js分页)

前端技术 2023/09/02 JavaScript

调用:

复制代码 代码如下:

var pageChange = 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) { return x; } (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 (var index = 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;
 };

本文地址:https://www.stayed.cn/item/5342

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见,何事秋风悲画扇。