最近做了个项目,有用到分页, 这类插件应该是很常用的, 虽然网上很多现成的分页插件, 但是还是想着自己写一个, 给自己积累点东西, 顺便练练手, 写了差不多3个小时左右, 代码如下:

代码:

 <!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页插件</title>
<style type="text/css">
body{padding: 0px; margin: 0px;}
.content{width: 980px; margin: 0 auto; padding-top: 50px;}
ul{margin:0px; padding:0px;}
ul li{margin:0px; padding:0px; list-style:none; float:left;}
</style>
</head>
<body>
<div class="content">
<p>当前页: <input type="text" id="txtPageIndex" /></p>
<p>总页数: <input type="text" id="txtPageCount" /></p>
<p><button id="btnSubmit">submit</button></p>
<br />
<br /> <p>输出:</p>
<div id="pageBox"> </div>
</div> <script type="text/javascript">
function byID(id){
return document.getElementById(id);
} var ui = {};
ui.btnSubmit = byID('btnSubmit');
ui.txtPageIndex = byID('txtPageIndex');
ui.txtPageCount = byID('txtPageCount');
ui.pageBox = byID('pageBox'); ui.btnSubmit.onclick = function(){
var pageIndex = ui.txtPageIndex.value;
var pageCount = ui.txtPageCount.value; var options = {
pageIndex: parseInt(pageIndex),
pageCount: parseInt(pageCount),
container: ui.pageBox
}; if(options.pageCount > 0){
var page = new pagination(options);
page.init();
}else{
alert('总页数不能小于0');
} }; function pagination(options){
this.pageIndex = options.pageIndex || 1;
this.pageCount = options.pageCount;
this.showPage = options.showPage || 3;
this.container = options.container;
} pagination.prototype = {
init: function(){
/*初始化检查当前页是否合理*/
this.pageIndex = this.pageIndex < 1 ? 1 : this.pageIndex;
this.pageIndex = this.pageIndex > this.pageCount ? this.pageCount : this.pageIndex; /*渲染UI*/
this.render();
},
render: function(){
var pageList, setting; pageList = [];
setting = this.getSetting(this.pageIndex);
pageList.push('<ul class="pagination">'); if(this.pageIndex > 1){
pageList.push('<li><button value="' + setting.prev + '">上一页</button></li>'); if(setting.start > 1){
pageList.push('<li><button value="1">1</button></li>');
} if(setting.start > 2){
pageList.push('<li>...</li>');
}
}else{
pageList.push('<li><button value="1" disabled="disabled">上一页</button></li>');
} for (var i = setting.start; i <= setting.end; i++) {
if(i == this.pageIndex){
pageList.push('<li><button value="' + i + '" disabled="disabled">' + i + '</button></li>');
}else{
pageList.push('<li><button value="' + i + '">' + i + '</button></li>');
}
}; if(this.pageIndex < this.pageCount){
if(setting.end < this.pageCount){
if(setting.end < (this.pageCount - 1)){
pageList.push('<li>...</li>');
} pageList.push('<li><button value="' + this.pageCount + '">' + this.pageCount + '</button></li>');
} pageList.push('<li><button value="' + setting.next + '">下一页</button></li>');
}else{
pageList.push('<li><button value="' + this.pageCount + '" disabled="disabled">下一页</button></li>');
} pageList.push('</ul>');
this.container.innerHTML = pageList.join('\n');
this.regEvent();
},
regEvent: function(){
/*事件注册*/
var _this = this;
var button = this.container.getElementsByTagName('button'); for(var i = 0; i < button.length; i++){
button[i].onclick = function(){
_this.change(parseInt(this.value));
};
}
},
change: function(index){
/*当前页改变时触发*/
this.pageIndex = index;
this.render();
this.onChange(index);
},
getSetting: function(index){
var start, end, prev, next, s, e; s = 0;
e = 0; start = index - this.showPage;
end = index + this.showPage; if(start < 1){
s = Math.abs(start) + 1;
start = 1;
} if(end > this.pageCount){
e = end - this.pageCount;
end = this.pageCount;
} if(s > 0 && e <= 0){
e = s + end;
end = e > this.pageCount ? this.pageCount : e;
}else if(e > 0 && s <= 0){
s = start - e;
start = s < 1 ? 1: s;
} prev = index > start ? index - 1 : 1;
next = index < end ? index + 1 : end; /*核心算法, 根据当前页计算出显示的起始页和截止页, 上一页, 下一页 这些数据*/
return {start: start, end: end, prev: prev, next: next};
},
onChange: function(index){
/*空函数, 可覆盖*/
console.log(index);
}
}; </script>
</body>
</html>

pagination分页插件的更多相关文章

  1. Slider 滚动条 Pagination分页插件 JS Ajax 数据范围筛选 加载 翻页 笔记

    入职以后的第二个任务  根据用户所选的价格范围 筛选数据 修复BUG - 筛选数据后 总数没有更新.列表显示错误.翻页加载错误 用到的一些知识点 jquery插件系列之 - Slider滑块 max ...

  2. jQuery Pagination分页插件

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. jQuery Pagination分页插件--刷新

    源码地址:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeDemo.aspx ...

  4. JQuery Pagination 分页插件 增加了首页尾页以及跳转功能

    JQuery分页插件 挺好用的 但是官方是没有提供首页尾页以及跳转功能 我觉得这个功能可以有,于是就改进了一下 一个js一个css从连接里面下 链接:http://pan.baidu.com/s/1n ...

  5. Jquery Pagination分页插件使用

    JqueryPagination是个简单轻量级的分页插件,使用起来很容易,只要初始化一个实例,并设置总数量.翻页回调函数.其它参数就可以实现无刷新分页功能了. 准备工作 下载jquery.min.js ...

  6. jQuery Pagination分页插件--无刷新

    源码:https://github.com/SeaLee02/FunctionModule/blob/master/UploadFiles/WebDemo/FenYE/FenYeAjax.aspx 代 ...

  7. jQuery Pagination分页插件的使用

    一.引用CSS和JS: <link href="/Content/Plugins/jQuery.Pagination_v2.2/pagination.css" rel=&qu ...

  8. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  9. Jquery前端分页插件pagination使用

    插件描述:JqueryPagination是一个轻量级的jquery分页插件.只需几个简单的配置就可以生成分页控件.并且支持ajax获取数据,自定义请求参数,提供多种方法,事件和回调函数,功能全面的分 ...

随机推荐

  1. java 基础知识

    ...是Java代码的一部分,表明可以接受任意数量的对象,例子如下: 感觉很有趣 public static double max(double... values){ double largest ...

  2. 第十一届GPCT杯大学生程序设计大赛完美闭幕

    刚刚过去的周六(6月7号)是今年高考的第一天,同一时候也是GPCT杯大学生程序设计大赛颁奖的日子,以下我们用图文再回想一下本次大赛颁奖的过程. 评审过程的一些花絮<感谢各位评审这些天的付出!&g ...

  3. 对于deferred的一点点理解

    deferred对象,是一个异步队列.能够实现异步代码调用,从而解决代码执行顺序的问题. 它提供了一下主要方法: jQuery.Deferred() 一个构造函数,返回一个链式实用对象方法来注册多个回 ...

  4. (原)前端知识杂烩(meta系列)

    更新于 20160831 1. meta 移动端头文件设置 (一般情况下,逐条复制放在头部就可以了) 1.1 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏 ...

  5. php之Cookie与Session详解

    Cookie管理 Cookie是在HTTP协议下,通过服务器或脚本语言可以维护客户浏览器上信息的一种方式,Cookie的使用很普遍,许多提供个人化服务的网站都是利用Cookie来区别不同用户,以显示与 ...

  6. jsonsql

    http://www.trentrichardson.com/jsonsql/ 可以对json数组用sql语法进行操作,主要是查询取指定字段.条件.指定字段排序及获取多少条数据,返回值json. js ...

  7. Oracle触发器Trigger基础1

    /* Trigger是作用在表上,或是数据库上,或是用户上.当用户在表上(其他)做某些操作时,trigger将会自己执行. 可以在表上:insert,update,delete Trigger只对表的 ...

  8. iOS开发之性能优化

    1.避免过于庞大的XIB 当加载XIB的时候把所有的东西都放在了内存里,包括任何的图片:如果有一个不会即刻用到的view,就会浪费宝贵的内存资源了. 当加载一个引用了图片或者声音资源的nib时,nib ...

  9. NSURLSessionDownloadTask 下载文件

    -(void)RequestdataUI:(NSString*)ImageURL imageName:(NSString*)imageName{ NSURL *url = [NSURL URLWith ...

  10. HTML1网页三部份内容

    网页三部份内容:HTML CSS Javascript 路径:一般做网页的时候用的相对路径. images/aaa.jpg 网页同一个目录中找images文件夹,再在images里面找aaa.jpg ...