上一页下一页js
来源:互联网 发布:教学资源管理库软件 编辑:程序博客网 时间:2024/04/28 02:21
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>javascript分页程序</title><style></style></head><body><script>//事件基础类(function() {var EventBase = function() {this.addListener = function(type, listener) {getListener(this, type, true).push(listener);}this.removeListener = function(type, listener) {var listeners = getListener(this, type);for(var i = 0; i < listeners.length; i++) {if(listeners[i] == listener) {listeners.splice(i, 1);return;}}}this.fireEvent = function(type) {var listeners = getListener(this, type),r, t, k;if(listeners) {k = listeners.length;while(k--) {t = listeners[k].apply(this, arguments);if(t !== undefined) {r = t;}}}if(t = this['on' + type.toLowerCase()]) {r = t.apply(this, arguments);}return r;}}function getListener(obj, type, force) {var allListeners;type = type.toLowerCase();return((allListeners = (obj.__allListeners || force && (obj.__allListeners = {}))) &&(allListeners[type] || force && (allListeners[type] = [])));}window['EventBase'] = EventBase;})();//分页类var Page = function(pageCanvas) {this.recordCount;this.pageSize;this.numericButtonCount;this.pageCanvas = pageCanvas;this.pageIndex = 1;}Page.prototype = new EventBase();Page.prototype.getPageHtml = function() {this.pageCount = Math.ceil(this.recordCount / this.pageSize);var prev = this.pageIndex == 1 ? " <span class='page_up_onthis'>上一页</span>" : " <span class='page_up'><a href='javascript:;' pageindex='" + (this.pageIndex - 1) + "'>上一页</a></span> ";var next = this.pageCount <= this.pageIndex ? " <span class='page_next_onthis'>下一页</span>" : " <span class='page_next'><a href='javascript:;' pageIndex='" + (this.pageIndex + 1) + "'>下一页</a></span>";var first = this.pageIndex == 1 ? "<span class='onthis'>1</span>..." : "<span><a href='javascript:;' pageindex='1'>1</a></span>...";var last = this.pageCount <= this.pageIndex ? "...<span class='onthis'>" + this.pageCount + "</span>" : "...<span><a href='javascript:;' pageindex='" + (this.pageCount) + "'>" + this.pageCount + "</a></span>";var pageStr = ""var pageMathIndex = Math.floor(this.numericButtonCount / 2);var pageStartIndex;var pageEndIndex;if(this.pageCount < this.numericButtonCount) {pageStartIndex = 1pageEndIndex = this.pageCount;} else {if(this.pageCount - pageMathIndex < this.pageIndex) {pageStartIndex = this.pageCount - this.numericButtonCount + 1;pageEndIndex = this.pageCount;} else {if(this.pageIndex - pageMathIndex < 1) {pageStartIndex = 1;pageEndIndex = this.numericButtonCount;} else {pageStartIndex = this.pageIndex - pageMathIndex;pageEndIndex = this.pageIndex + pageMathIndex;}}}for(var i = pageStartIndex; i <= pageEndIndex; i++) {if(this.pageIndex == i) pageStr += " <span class='curr onthis'>" + i + "</span>"else pageStr += " <span><a href='javascript:;' pageindex='" + i + "'>" + i + "</a></span>";}if(pageStartIndex == 1) first = '';if(pageEndIndex == this.pageCount) last = '';//pageStr = first + prev + pageStr + next + last;pageStr = prev + first + pageStr + last + next;return pageStr;}Page.prototype.onPageChanged = function(pageIndex) {this.pageIndex = pageIndex;this.fireEvent('pageChanged');}Page.prototype.pageEvent = function(page) {this.onclick = function(e) {e = e || window.event;t = e.target || e.srcElement;if(t.tagName == "A") page.onPageChanged(parseInt(t.getAttribute("pageindex")));}}Page.prototype.render = function() {var pageCanvas = document.getElementById(this.pageCanvas);pageCanvas.innerHTML = this.getPageHtml();this.pageEvent.call(pageCanvas, this);}Page.prototype.initialize = function() {this.onPageChanged(this.pageIndex);}</script><div id="page"></div><script>var p = new Page('page');//总记录数p.recordCount = 50;//分页按扭数p.numericButtonCount = 6;//每页记录数YWp.pageSize = 2;//当点击分页时触发此事件。 一些外加的效果可以放在此处, 如加载数据p.addListener('pageChanged', function() {alert('第' + p.pageIndex + '页');p.render();});p.initialize();</script></body></html>
(复制的)
自己修改了一下,确实是好用,就直接用了
0 0
- js上一页,下一页
- 上一页下一页js
- js上一页/下一页真分页的页码生成
- JS后退一页, JS返回上一页, JS返回下一页代码
- js 返回上一页
- js 返回上一页
- js 返回上一页
- js 返回上一页
- js返回上一页
- js返回上一页
- js返回上一页
- js返回上一页
- listview实现上一页下一页
- 分页(上一页,下一页)
- wordpress post 的上一页 下一页
- dede 分页 上一页 下一页
- CDSN上一页下一页功能模仿
- 织梦只调用上一页下一页链接
- 代理服务器CCProxy
- Python之os模块学习介绍
- 一个非常强大的视频、音频、二维码、图片、压缩等在线网址
- Linux下DVD-R刻录问题
- [Leetcode] 113. Path Sum II 解题报告
- 上一页下一页js
- atof(),atoi(),itoa(),sprintf()等用法总结,强大的sprintf()
- JAVA 4种线程池的使用
- 10亿级流数据交互查询,为什么抛弃MySQL选择VoltDB?
- linux 下shell中if的“-e,-d,-f”是什么意思
- 词向量之word2vec(2)
- [VR][Daydream]Ch 1 : Development Environment
- ActiveRecord::Fixture::FixtureError: table "users" has no column named "activated_at".
- MyBatis crud操作