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


Posted in Javascript onDecember 13, 2013

调用:

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;
 };
Javascript 相关文章推荐
Javascript this指针
Jul 30 Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 Javascript
node.js中的fs.fstat方法使用说明
Dec 15 Javascript
JS实现生成会变大变小的圆环实例
Aug 05 Javascript
js实现的后台左侧管理菜单代码
Sep 11 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
Mar 14 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
JS跨域请求的问题解析
Dec 03 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
js实现拖动缓动效果
Jan 13 Javascript
Javascript实现单选框效果
Dec 09 Javascript
jquery 操作iframe的几种方法总结
Dec 13 #Javascript
异步动态加载JS并运行(示例代码)
Dec 13 #Javascript
JQuery中$.ajax()方法参数详解及应用
Dec 12 #Javascript
js setTimeout()函数介绍及应用以倒计时为例
Dec 12 #Javascript
jquery如何获取复选框的值
Dec 12 #Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 #Javascript
jQuery的each终止或跳过示例代码
Dec 12 #Javascript
You might like
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
javascript面向对象编程代码
2011/12/19 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
2014/04/23 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery UI结合Ajax创建可定制的Web界面
2016/06/22 Javascript
简单理解js的prototype属性及使用
2016/12/07 Javascript
jquery radio 动态控制选中失效问题的解决方法
2018/02/28 jQuery
vue中过滤器filter的讲解
2019/01/21 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
vue-router源码之history类的浅析
2019/05/21 Javascript
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
Python基于xlrd模块操作Excel的方法示例
2018/06/21 Python
Python2.7环境Flask框架安装简明教程【已测试】
2018/07/13 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python3实现的简单三级菜单功能示例
2019/03/12 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
django 实现手动存储文件到model的FileField
2020/03/30 Python
如何用python开发Zeroc Ice应用
2021/01/29 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
StubHub新西兰:购买和出售你的门票
2019/04/22 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
法学研究生自我鉴定范文
2013/12/04 职场文书
大学生职业生涯设计书
2014/01/02 职场文书
金融管理毕业生求职信
2014/03/03 职场文书
模具专业求职信
2014/06/26 职场文书
班组长安全工作职责
2014/07/15 职场文书
2014年个人债务授权委托书范本
2014/09/22 职场文书
学习普通话的体会
2014/11/07 职场文书
新闻发布会新闻稿
2015/07/17 职场文书
《追风筝的人》:人心中的成见是座大山,但请不忘初心
2019/11/15 职场文书
python单元测试之pytest的使用
2021/06/07 Python
Mysql 8.x 创建用户以及授予权限的操作记录
2022/04/18 MySQL
PyTorch中permute的使用方法
2022/04/26 Python