JS案例之1——pager 分页
学习JS大半年之久，第一次自己尝试写一些小插件，写法参考网上某位牛人写代码的思路。
此处代码写的是静态分页。如果需动态分页，还可以修改下。第一次写，还有很多地方可以优化。希望各位大牛踊跃拍砖。
预览图
源代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
<title> pager demo </title>
<meta name="author" content="rainna" />
<meta name="keywords" content="rainna's js lib" />
<meta name="description" content="pager demo" />
</head>
<style>
*{margin:0;padding:0;}
li{list-style:none;}
.j-curr{color:red;} #list,#pager{width:400px;margin:50px auto;text-align:center;line-height:26px;}
#list li{border-bottom:1px solid #eee;}
#pager li{display:inline-block;padding:0 5px;cursor:pointer;}
</style>
<body>
<div id="list">
<ul>
<li>01111111</li>
<li>0222222</li>
<li>0333333</li>
<li>0444444</li>
<li>0555555</li>
<li>0666666</li>
<li>0777777</li>
<li>0888888</li>
<li>0999999</li>
<li>10101010</li>
<li>11111111</li>
<li>12121212</li>
<li>13131313</li>
<li>14141414</li>
<li>15151515</li>
<li>16161616</li>
<li>17171717</li>
<li>18181818</li>
<li>19191919</li>
<li>20202020</li>
<li>01111111</li>
<li>0222222</li>
<li>0333333</li>
<li>0444444</li>
<li>0555555</li>
</ul>
</div>
<div id="pager"></div> <script>
var pager = function(){
//公共函数
function T$(id){
return document.getElementById(id);
}
function T$$(root,tag){
return (root || document).getElementsByTagName(tag);
}
function $extend(object1,object2){
for(var p in object2){
object1[p] = object2[p];
}
return object1;
}
function $each(arr, callback, thisp) {
if (arr.forEach){
arr.forEach(callback, thisp);
}else{
for(var i = 0, len = arr.length; i < len; i++){
callback.call(thisp, arr[i], i, arr);
}
}
} //默认参数配置
var defaultOptions = {
elemShowCount:5, //每页显示条数，默认为5条
pageShowCount:4, //显示的页码数目，默认显示4个页码
showFirstPageBtnAndLastPageBtn:true, //是否显示首页，尾页，默认显示
showPrevBtnAndNextBtn:true, //是否显示上一页，下一页，默认显示
showPageNumTips:true, //是否显示【1/7页】页面提示，默认显示
showPageNum:true //是否显示分页的数字，默认显示
}; //主类构造函数 参数说明：bid为元素容器div的ID,pid为分页容器div的ID,options为重写的默认配置参数
var showPage = function(bid,pid,options){
var self = this;
if(!(self instanceof showPage)){
return new showPage(bid,pid,options);
}
self.container = T$(bid); //元素容器div
self.pagerBox = T$(pid); //翻页容器div
if(!self.container){
return;
}
self.options = $extend(defaultOptions,options||{});
self.elem = T$$(self.container,'li'); //需要分页的元素
self.elemTotalCount = self.elem.length || 0; //分页元素的总个数
self.pageTotalCount = Math.ceil(self.elemTotalCount/self.options.elemShowCount) || 0; //总页数
}; showPage.prototype = {
constructor:showPage,
//显示当页的元素内容，参数currPageNum为当前页码，从0开始
showChangeElemCont: function(currPageNum){
var self = this; //this为showPage对象
var nextPageCount = (currPageNum+1)*self.options.elemShowCount < self.elemTotalCount ? (currPageNum+1)*self.options.elemShowCount : self.elemTotalCount; //判断为最后一页时，最后一页应该显示的数据条数
for(var i=0;i<self.elemTotalCount;i++){
self.elem[i].style.display = 'none';
}
for(var i=currPageNum*self.options.elemShowCount,l=nextPageCount;i<l;i++){
self.elem[i].style.display = 'block';
}
},
//显示当页的页码内容，参数currPageNum为当前页码，从0开始
showChangePageCont: function(currPageNum){
var self = this; //this为showPage对象
var firstPageHtml = prevPageHtml = pageLinkHtml = nextPageHtml = lastPageHtml = pageTips = ''; //firstPageHtml:首页 prevPageHtml:上一页 pageLinkHtml:页码表 nextPageHtml:下一页 lastPageHtml:尾页 pageTips:页码提示
var startPage,endPage; //startPage:页码列表中的第一页 endPage:页码列表中的最后一页
var pageShowMidCount = Math.ceil(self.options.pageShowCount/2); //页码中间值，当超过这个值时，页码列表发生变化
if(self.pageTotalCount <= self.options.pageShowCount){ //总页码数小于等于默认要显示的页码数时，直接在当前页面显示全部的页码
startPage = 0;
endPage = self.pageTotalCount-1;
}else{
if(self.options.pageShowCount%2 == 0){
if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;
endPage = self.options.pageShowCount-1;
}else if((currPageNum + 1 + pageShowMidCount) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
endPage = self.pageTotalCount-1;
}else{
startPage = currPageNum - pageShowMidCount + 1;
endPage = currPageNum + pageShowMidCount;
}
}else{
if((currPageNum + 1 - pageShowMidCount) <= 0){ //首页
startPage = 0;
endPage = self.options.pageShowCount-1;
}else if((currPageNum + 1 + pageShowMidCount - 1) >= self.pageTotalCount){ //尾页
startPage = self.pageTotalCount-1 - self.options.pageShowCount + 1;
endPage = self.pageTotalCount-1;
}else{
startPage = currPageNum - pageShowMidCount + 1;
endPage = currPageNum + pageShowMidCount - 1;
}
}
} //显示首页尾页
if(self.options.showFirstPageBtnAndLastPageBtn == true){
firstPageHtml = '<li>首页</li>';
lastPageHtml = '<li>尾页</li>';
}
//显示上一页下一页
if(self.options.showPrevBtnAndNextBtn == true){
if(currPageNum != 0) prevPageHtml = '<li>上一页</li>'; //首页不显示上一页
if(currPageNum != self.pageTotalCount-1) nextPageHtml = '<li>下一页</li>'; //尾页不显示最后一页
}
//显示页码数字链接
for(var i=startPage,l=endPage;i<=l;i++){
if(currPageNum==i){
pageLinkHtml += '<li class="j-curr">' + (i+1) + '</li>';
}else{
pageLinkHtml += '<li>' + (i+1) + '</li>';
}
}
//显示页码提示信息
if(self.options.showPageNumTips == true){
pageTips = '<span>' +(currPageNum+1) + '/' + self.pageTotalCount + '</span>';
}
//拼出页码元素的整体内容
self.pagerBox.innerHTML = firstPageHtml + prevPageHtml + pageLinkHtml + nextPageHtml + lastPageHtml + pageTips; var elems = T$$(self.pagerBox,'li');
$each(elems, function(o, i) {
o.onclick = function() {
if(o.innerText == '首页'){
self.showChangeElemCont(0);
self.showChangePageCont(0);
}else if(o.innerText == '尾页'){
self.showChangeElemCont(self.pageTotalCount-1);
self.showChangePageCont(self.pageTotalCount-1);
}else if(o.innerText == '上一页'){
self.showChangeElemCont(currPageNum-1);
self.showChangePageCont(currPageNum-1);
}else if(o.innerText == '下一页'){
self.showChangeElemCont(currPageNum+1);
self.showChangePageCont(currPageNum+1);
}else{
index = parseInt(o.innerText) - 1;
self.showChangeElemCont(index);
self.showChangePageCont(index);
}
}
});
}
}; return{
onShowPage:function(bid,pid,options){
//调用主类
var st = new showPage(bid,pid,options);
st.showChangeElemCont(0);
st.showChangePageCont(0);
}
}
}(); pager.onShowPage('list','pager',{elemShowCount:4,pageShowCount:5});
</script>
</body>
</html>
源码下载：Download
JS案例之1——pager 分页的更多相关文章
- js对文章内容进行分页示例代码
这篇文章主要介绍了使用js对文章内容进行分页的具体实现,需要的朋友可以参考下 Thinkphp中文章显示代码: 代码如下: <div id="showContent"> ...
- 第一个Vue.js案例
第一个Vue.js案例 使用Vue有如下几步 引入文件头 加入数据输出框 创建Vue对象,定义数据 案例: <!DOCTYPE html> <html lang="en&q ...
- js案例之使用正则表达式进行验证数据正确性
#js案例之使用正则表达式进行验证数据正确性 代码上传至 "GitHub" 样例: <tr> <td>密码:</td> <td> & ...
- JS案例 - 分页
1.html文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
- [js开源组件开发]ajax分页组件
ajax分页组件 我以平均每一周出一个开源的js组件为目标行动着,虽然每个组件并不是很庞大,它只完成某一个较小部分的工作,但相信,只要有付出,总会得到回报的.这个组件主要完成分页的工作. 这张图里显示 ...
- 【转】asp.net mvc webapi+angular.js案例
参考地址:http://www.mamicode.com/info-detail-892383.html 大家好,本文用一个简单的demo演示AngularJS在MVC中的使用,在学习这个demo之前 ...
- JS案例之3——倒计时
利用简单的数字累加循环模拟倒计时的效果,逻辑比较简单.如果大牛们有更好的办法欢迎补充. 这种效果经常用于在规定的时间做某件事.比如在1分钟之后重新发送验证码等. 案例演示: 源代码如下: <!D ...
- 自己写的一个Pager分页组件,WebForm，Mvc都适用
我一说写这个功能的时候,好多人估计有疑问.分页功能网上多的是,搜一个不就行了,你这样不是浪费时间么.你说这句话的时候,我是比较信的,首先自己写一些东西是很耗时,有这些时间又能多打几盘LOL了.但是我觉 ...
- Knockout.Js案例二Working With Lists And Collections
案例一:Foreach绑定 通常,您要生成重复的UI元素,特别是当显示列表,用户可以添加和删除元素.KO.JS让你轻松,使用的数组和foreach绑定. 在接下来的几分钟,您将构建一个动态UI保留席位 ...
随机推荐
- 原生JS获取各种高度宽度、浏览器窗口滚动条的位置、元素的几何尺寸名
1)关于 pageX, clienX,offsetX,layerX pageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化 clientX:鼠标在页面上可视区域的位 ...
- linux下重启oracle服务：监听器和实例
一.在Linux下重启Oracle数据库及监听器: 方法1: 用root以ssh登录到linux,打开终端输入以下命令: cd $ORACLE_HOME #进入到oracle的安装目录 dbstart ...
- MongoDB学习笔记——聚合操作之MapReduce
MapReduce MongoDB中的MapReduce相当于关系数据库中的group by.使用MapReduce要实现两个函数Map和Reduce函数.Map函数调用emit(key,value) ...
- PE文件结构部分解析以及输入的定位
原文链接地址:http://www.cnblogs.com/shadow-lei/p/3554670.html PE文件定义 PE 文件("Portable executable" ...
- KD Tree算法
参考:http://blog.csdn.net/v_july_v/article/details/8203674 #!/user/bin/env python # -*- coding:utf8 -* ...
- 记一次Web应用CPU偏高
LZ开发的一个公司内部应用供查询HIVE数据使用.部署上线后总是会出现CPU偏高的情况,而且本地测试很难重现.之前出现几次都是通过直接重启后继续使用,因为是内部使用,重启一下也没有很大影响(当然,每次 ...
- SSL certificate problem unable to get local issuer certificate解决办法
SSL certificate problem unable to get local issuer certificate 解决办法: 下载:ca-bundle.crt 将它放在自己的wamp或者x ...
- C# Graphic 绘制圆、三角形、椭圆、图片
在form和panel上可以绘制图形,线段,圆,文字,图形等等. 绘制代码必须放在OnPaint()函数里面,因为窗体刷新的时候,都会调用该函数,重新刷新所绘的图. 示例代码在Panel上绘制图形来简 ...
- Linux 系统常用命令汇总（一） 文件和目录操作
文件和目录 命令 选项 注解 示例 文件的基本操作 ls [选项][文件] 显示所有文件和目录 ls -al -a(A) 显示所有文件和目录,包括隐藏文件和目录(显示所有文件和目录,包括隐藏文件和 ...
- UVALive 6093 Emergency Room --优先队列实现的模拟
题意:给n个医生,这些医生有一个上班时间,然后给一些病人,病人有一个到达的时间,以及一些诊断,诊断有property(优先级)和duration(诊断时间)这两个属性,每个病人可能要诊断多次,最后问每 ...