js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由

//page(JSON对象);所有属性见代码中ops
define(function (require, exports, module) {    module.exports= function(os){//可用配置属性var ops = {total:0 //记录数, page:0 //当前页, count:0 //或当前记录数, side:5 //当前页左右数字页个数, per:5 //每页条数//模板的值非''才显示,占位符有{=page},{=maxPage},{=total},{=currentPage}, firstTPL:'<a href="?{=page}">首页</a>' //首页模板, lastTPL:'<a href="?{=page}">末页</a>' //末页模板, prevTPL:'<a href="?{=page}">上页</a>' //上页模板, nextTPL:'<a href="?{=page}">下页</a>' //下页模板, prevSideTPL:'<a href="?{=page}"><<</a>' //前组模板(快退), nextSideTPL:'<a href="?{=page}">>></a>' //后组模板(快进), numberTPL:'<a href="?{=page}">{=page}</a>' //页码形式模板, pageTPL:'<a href="#{=page}">{=page}</a>' //当前页码模板, jumpTPL:'' //跳转form}; for (var o in ops)o in os && (ops[o]=os[o]);   function parseTPL(tpl,json) {if (!tpl)return '';json.maxPage = ops.maxp;json.total = ops.total;json.currentPage = ops.page;return String(tpl).replace(/\{\=(\w+)\}/g,function($0,$1){return json[$1]||'';});}var pages = '';(!+ops.per || ops.per < 1) && (ops.per = 5);if (!+ops.total || ops.total <= ops.per )return pages;//只有一页ops.maxp = Math.ceil(ops.total/ops.per);//最大页  //得到当前页码与偏移if (ops.count > 0) {//使用条数方式ops.count > ops.total && (ops.count = ops.total);   ops.page = Math.ceil(ops.count/ops.per);//数据位移转换成页,余+1} else if (ops.page > 1){//页码式ops.page > ops.maxp && (ops.page = ops.maxp);ops.count = ops.page*ops.per;} else {ops.count = 0;ops.page = 1;}ops.nums = ops.side*2+1;//总数字页为*2+1        console.log(ops);//首页/上页,左边页面码,page>side出现if (ops.page > ops.side+1)pages += parseTPL(ops.firstTPL,{page:1})+ parseTPL(ops.prevTPL,{page:ops.page-1});//快退:var prevp = ops.page - ops.nums;if (prevp > 1 )pages += parseTPL(ops.prevSideTPL,{page:prevp});//中间左边/右边的页码for  (var fi = ops.side, sidel=sider='',pl=pr=ops.page;fi >0; fi--) {   //左边页面码if (--pl >= 1)sidel = parseTPL(ops.numberTPL,{page:pl}) + sidel;   //右边页码if (++pr <= ops.maxp)sider += parseTPL(ops.numberTPL,{page:pr});          }pages += sidel + parseTPL(ops.pageTPL,{page:ops.page})+ sider;//快进按钮var nextp = ops.page + ops.nums;if (ops.maxp > nextp )pages += parseTPL(ops.nextSideTPL,nextp);   //最后的按钮if (ops.maxp- ops.page > ops.side)pages += parseTPL(ops.nextTPL,{page:ops.page+1})           +parseTPL(ops.lastTPL,{page:ops.maxp});//跳转if (ops.page > ops.side || ops.maxp-ops.page >ops.side)pages += parseTPL(ops.jumpTPL,{page:ops.page});return pages;}
});

使用方法

seajs见seajs.org

或者改写成普通的插件

seajs.use('chrd/page/1.0/page.js#?kdkddddddgdkk',function(p){page = p({total:1000,page:25});console.log(page);})

Object {total: 1000, page: 25, count: 125, side: 5, per: 5…}

page.js:55

js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由相关推荐

js 分页插件(jQuery)
参考:http://www.jb51.net/article/117191.htm 侵删 css 部分 @charset "utf=8"; *{box-sizing: border ...
分页请求时，有新数据加入时，下一页会出现重复数据问题
公司业务发展迅速,用户量急剧上升中,偶尔会发现这么一个问题,就是下一页的数据中总会出现上一页的几条数据.具体表现就是注意4号和5号第一页和第二页都出现的了这两人为什么会造成这个问题呢?用户在查询 ...
html超出高度自动下一页,上滑web页面自动加载下一页
移动端常常是通过向上滑动到页面底部自动加载下一页内容,而不是点击"下一页"按钮进行加载.这是一个演示了自动加载下一页的小demo. html: html> 向上滑动自动加载后 ...
WORD中如何设置前几页不显示页码，同时更改总页数
word文档在同一文件中插入页码时,总是从第一页到末页顺序编码,但我这一文件从第1-4页为"提纲"或者"前言",不需编页码,从第5页开始才是正文,那么怎样才能使 ...
python跳转下一页_Python网页浏览转到下一页
代码只是反复打印相同的电子邮件地址,而不会转到下一页.有人看到我代码中的错误吗?import requests from bs4 import BeautifulSoup as soup def ge ...
Microsoft Word的第二页开始加页码脚标，总页数减一
文章目录问题解决参考问题如何从Microsoft Word的第二页开始加页码脚标,Page x of y,这里y是总页数减一. 解决首先把文档分成两段,设置Section Break,第一 ...
Word第1、2页不显示页码，从第3页开始显示页码
在要编辑的word里头,把光标移到第3页,在"页面布局"下有个"分隔符"菜单,点开该菜单,在"分节符"里头选定"下一页" ...
python模拟点击下一页_爬虫模拟点击下一页selenium
爬虫实现翻页功能 from selenium import webdriver from selenium.webdriver.support.ui import WebDriverWait from ...
python爬虫获取下一页_Python Scrapy 自动抓取下一页内容
最近在学下Scrapy,抓取下一页的时候遇到了问题 import scrapy from crawlAll.items import CrawlallItem class ToutiaoEssayJo ...
android 列表视频播放器,Android------视频播放器（包含全屏播放，快退，快进，腾讯新闻的列表播放等）...
前段时间做了一个新闻APP,涉及到了列表视频播放,和腾讯新闻APP差不多,总结了一下代码,写了一个Demo来分享给大家. 用了 TabLayout+RecylerView+自定义视频控件完成的列表 ...

js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由

js分页插件:首页,上页,快退,页码,快进,下页末页,跳转,使用模板,灵活自由相关推荐

最新文章

热门文章