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保留席位 ...
随机推荐
- 多线程基础（三）NSThread基础
3.多线程基础 NSThread的基本使用 如何使用NSThread创建新线程 创建线程之后是默认不执行的状态 创建三个线程: 通过name属性区别这些线程 接下来就是通过设置线程的优先级来设 ...
- Windows Server 2008 R2怎样设置自动登陆
Windows Server 2008 R2是一款服务器操作系统,提升了虚拟化.系统管理弹性.网络存取方式,以及信息安全等领域的应用,Windows Server 2008 R2也是第一个只提供64位 ...
- [AapacheBench工具]web性能压力测试工具的应用与实践
背景:网站性能压力测试是性能调优过程中必不可少的一环.服务器负载太大而影响程序效率是很常见的事情,一个网站到底能够承受多大的用户访问量经常是我们最关心的问题.因此,只有让服务器处在高压情况下才能真正体 ...
- 使用网站websequencediagrams在线画时序图
在线画时序图的网站:https://www.websequencediagrams.com/ 该网站提供拖拉图形和编写脚本代码2个方式来制作时序图,同时提供多种显示风格. 实例: 1.脚本代码: ti ...
- Oracle与SQL SERVER编程差异分析（入门）
网上有关Oracle与SQL SERVER性能差异的文章很多,结论往往是让你根据数据量与预算来选择数据库.但实际项目中,特别是使用 .Net 开发的系统,支持以上两种数据库或者更多已经成为Boss的普 ...
- lucene索引
一.lucene索引 1.文档层次结构 索引(Index):一个索引放在一个文件夹中: 段(Segment):一个索引中可以有很多段,段与段之间是独立的,添加新的文档可能产生新段,不同的段可以合并成一 ...
- 更改ubuntu下mysql的密码
1.首先,进入环境中去,即 mysql -u root -p ,然后输入原始密码 2.此时会出现 mysql > 3.开始修改密码: mysql > use mysql ; ...
- SQL Server 2005中更改sa的用户名和密码
修改数据库SA账号名称的代码如下: 代码如下: Alter LOGIN sa DISABLE Alter LOGIN sa WITH NAME = [systemAccount] "sys ...
- Storm 基础知识
分布式的实时计算框架,storm对于实时计算的意义类似于hadoop对于批处理的意义. Storm的适用场景: 1.流数据处理:storm可以用来处理流式数据,处理之后将结果写到某个存入中去. 2.持 ...
- Oracle 性能优化之一二
本人使用oracle时间不多,但是在项目中积累了一些经验教训,记录于此,以方便自己和他人解决类似的问题. 1.temp space超出限制的问题 问题场景: 在复杂的ETL query中,有时候一张f ...