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保留席位 ...
随机推荐
- SAM4E单片机之旅——23、在AS6（GCC）中使用FPU
浮点单元(Floating Point Unit,FPU),是用于处理浮点数运算的单元. 为使用FPU,除了需要启用FPU外,还需要对编译器进行设置,以使其针对浮点运算生成特殊的指令.虽然在Atmel ...
- INFORMATICA 的部署实施 MTP&MTS
软件开发的一般都有三个环境,开发环境,用户接受度测试环境,生产环境.我最近实施了从开发环境到生产环境的部署工作,在此跟大家分享一下. 大概步骤如下: 1 备份生产环境INFORMATICA 知识库 ...
- keepalived初探
keepalived起初是为LVS设计的,专门用来监控LVS集群系统中各个real server的健康状况的,后来又在其中实现了VRRP协议,VRRP即virtual router redundanc ...
- 软件测试作业3--Junit、hamcrest、eclemmat的安装和使用
1. how to install junit, hamcrest and eclemma? 首先下载下来Junit和Hamcrest的jar包,然后新建项目的时候将这两个jar包导入到工程里面就 ...
- web开发相关解决方案
HTML5 API 应用 History.js - gracefully supports the HTML5 History/State APIs pushState + ajax Notify.j ...
- Culcurse
一.简介 如果你是一个享受Linux终端的系统管理员,但同样需要一种方法来安排每天最重要的任务.约会和会议,你会发现calcurse是一个很有用的工具.calcurse包含了日历.一个待办事项管理.一 ...
- Plus One
Plus One https://leetcode.com/problems/plus-one/ Given a non-negative number represented as an array ...
- 嵌入式Linux应用程序开发详解------（创建守护进程）
嵌入式Linux应用程序开发详解 华清远见 本文只是阅读文摘. 创建一个守护进程的步骤: 1.创建一个子进程,然后退出父进程: 2.在子进程中使用创建新会话---setsid(): 3.改变当前工作目 ...
- HTML常用文本元素
HTML是超文本标记语言,它提供网页的具体内容,包括文本.表单.图像.表格.链接.多媒体.列表等.其中文本是我们遇到的最多的展示内容.正确的使用文本标签,会使页面具有语义化,也有利于SEO. 文本标签 ...
- nginx 一二事(2) - 创建虚拟静态服务器
一.什么是nginx 是一个C语言开发的HTTP反向代理服务器,性能非常高 一个俄罗斯的哥们开发的,官方提供的测试性能能够达到5W的并发,我的天呐~,实际测试差不多是2W,而淘宝的牛人可以优化到200 ...