jQuery+html+css-自己写的分页
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>page</title>
</head>
<style>
*{margin: 0;padding: 0;}
#page{
height: 40px;
border: 1px solid #777;
margin: 200px auto;
box-sizing: border-box;
padding: 3px 10px;
}
.prev,.next{
cursor: pointer;
}
#page a{
display: inline-block;
vertical-align: top;
padding: 0 20px;
height: 28px;
line-height: 28px;
margin-right: -1px;
color: #333;
font-size: 12px;
border: 1px solid #e2e2e2;
text-decoration: none;
}
.active{
background: #009688;
color: #fff!important;
border: 1px solid #009688!important;
}
.disabled{
color: #d2d2d2!important;
cursor: not-allowed!important;
}
.first,.last{
padding: 0 10px!important;
}
.count{
display: inline-block;
vertical-align: top;
height: 28px;
line-height: 28px;
background-color: #fff;
color: #333;
font-size: 12px;
margin-left: 10px;
margin-right: 10px;
padding: 0;
border: none;
}
.page-limit{
display: inline-block;
vertical-align: middle;
height: 28px;
line-height: 28px;
margin: 0 -1px 5px 9px;
background-color: #fff;
color: #333;
font-size: 12px;
}
.page-limit select{
height: 22px;
padding: 3px;
border-radius: 2px;
cursor: pointer;
border: 1px solid #e2e2e2;
box-sizing: content-box;
font-size: 12px;
}
.page-skip{
display: inline-block;
vertical-align: middle;
height: 30px;
line-height: 30px;
color: #999;
margin-left: 10px;
margin: 0 -1px 5px 10px;
background-color: #fff;
color: #333;
font-size: 12px;
}
.page-input{
display: inline-block;
width: 40px;
margin: 0 10px;
padding: 0 3px;
text-align: center;
height: 30px;
line-height: 30px;
border-radius: 2px;
vertical-align: top;
background-color: #fff;
box-sizing: border-box;
border: 1px solid #e2e2e2;
outline: none;
}
.page-btn{
margin-left: 10px;
padding: 0 10px;
cursor: pointer;
height: 30px;
line-height: 30px;
border-radius: 2px;
vertical-align: top;
background-color: #fff;
box-sizing: border-box;
border: 1px solid #e2e2e2;
outline: none;
}
</style>
<body>
<div id="page"></div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
"use strict";
function initPage(elem,num,isFL,isCount,isLimit,isSkip,limitCount,pageSizeList){
//页数计算
var page=Math.ceil(num/limitCount);
var a,b,c,d,f,html;
if(isFL){
a='<a href="javascript:;" class="first disabled">首页</a>';
if(page>1){ b='<a href="javascript:;" class="last">末页</a>';
}else{
b='<a href="javascript:;" class="last disabled">末页</a>';
}
}else{
a=b='';
}
if(isCount){
c='<span class="count">共 '+num+' 条</span>';
}else{
c='';
}
if(isLimit){
d='<span class="page-limit"><select>'+
'<option value="'+pageSizeList[0]+'" selected>'+pageSizeList[0]+' 条/页</option>'+
'<option value="'+pageSizeList[1]+'">'+pageSizeList[1]+' 条/页</option>'+
'<option value="'+pageSizeList[2]+'">'+pageSizeList[2]+' 条/页</option>'+
'<option value="'+pageSizeList[3]+'">'+pageSizeList[3]+' 条/页</option>'+
'<option value="'+pageSizeList[4]+'">'+pageSizeList[4]+' 条/页</option>'+
'</select></span>';
}else{
d='';
}
if(isSkip){
f='<span class="page-skip">'+
'到第<input type="text" class="page-input" value="1">页'+
'<button class="page-btn">确定</button>'
'</span>'
;
}else{
f='';
} if(page==0){
html=a+'<a href="javascript:;" class="prev disabled">上一页</a><a href="javascript:;" class="next disabled">下一页</a>'+b+c+d+f;
}
if(page==1){
html=a+'<a href="javascript:;" class="prev disabled">上一页</a>'+
'<a href="javascript:;" data-page="1" class="numpage active" islast="true">1</a>'+
'<a href="javascript:;" class="next disabled">下一页</a>'+b+c+d+f;
}
if(page>1){
html=a+'<a href="javascript:;" class="prev disabled" data-page="0">上一页</a>'+
'<a href="javascript:;" data-page="1" class="numpage active" islast="false">1</a>';
for(var i=2;i<page+1;i++){
var last="false";
if(i==page){
last="true";
}
html+=`<a href="javascript:;" class="numpage" data-page="${i}" islast="${last}">${i}</a>`;
}
html+='<a href="javascript:;" class="next" data-page="2" >下一页</a>'+b+c+d+f;
}
$('#'+elem).html(html);
$('.page-limit select').find('option[value="'+limitCount+'"]').attr('selected','selected');
}
function getDomByAttr(arr,key,value){
var dom='';
for(var i=0;i<arr.length;i++){
if(arr[i].getAttribute(key) == value){
dom=(arr[i]);
break;
}
}
return dom;
}
var initConfig=function(ele,options){
var initDom=ele;
var options=options===undefined?{}:options;
var count=options.count===undefined?0:options.count;
var isFL=options.isFL===undefined?false:options.isFL;
var isCount=options.isCount===undefined?false:options.isCount;
var isLimit=options.isLimit===undefined?false:options.isLimit;
var isSkip=options.isSkip===undefined?false:options.isSkip;
var pageSizeList=options.pageSizeList===undefined?[10,20,30,40,50]:options.pageSizeList;
var limitCount=options.limitCount===undefined?pageSizeList[0]:options.limitCount;
var jump=options.jump===undefined?null:options.jump(options);
initPage(initDom,count,isFL,isCount,isLimit,isSkip,limitCount,pageSizeList);
$('#'+initDom).on('click','a',function(){ //点击的做判断
if($(this).is('.prev')){
//上一页
if($(this).next().is('.next')){
return false;
}
if($(this).is('.disabled')){
return false;
}else{
$('.next,.last').removeClass('disabled');
if($(this).attr('data-page') == 1){
$('.prev,.first').addClass('disabled');
}
var aDom=document.querySelectorAll('.numpage');
var addDom=getDomByAttr(aDom,'data-page',$(this).attr('data-page'));
var resDom=getDomByAttr(aDom,'data-page',parseInt($(this).attr('data-page'))+1);
if($('.active').attr('data-page') == 1){ return false;
}
$('.next').attr('data-page',$('.active').attr('data-page'));
$(resDom).removeClass('active');
$(addDom).addClass('active');
$('.prev').attr('data-page',parseInt($(this).attr('data-page'))-1);
}
}else if($(this).is('.next')){
if($(this).prev().is('.prev')){
return false;
}
//下一页 var aDom=document.querySelectorAll('.numpage');
var addDom=getDomByAttr(aDom,'data-page',$(this).attr('data-page'));
var resDom=getDomByAttr(aDom,'data-page',parseInt($(this).attr('data-page'))-1);
if($('.active').attr('islast') == "true"){
return false;
}
$('.prev').attr('data-page',$('.active').attr('data-page'));
$(resDom).removeClass('active');
$(addDom).addClass('active');
$('.next').attr('data-page',parseInt($(this).attr('data-page'))+1);
$('.prev,.first').removeClass('disabled');
if($('.active').attr('islast') == 'true'){
$('.next,.last').addClass('disabled');
}else{
$('.next,.last').removeClass('disabled');
}
}else if($(this).is('.numpage')){
//页数
$(this).addClass('active').siblings('.numpage').removeClass('active');
$('.next').attr('data-page',parseInt($(this).attr('data-page'))+1);
$('.prev').attr('data-page',$(this).attr('data-page')-1); if($(this).attr('data-page') == 2 && $(this).attr('islast') == "true"){//2页来回点
$('.prev,.first').removeClass('disabled');
$('.next,.last').addClass('disabled');
}else if($(this).attr('data-page') == 1 && $(this).attr('islast') == "false"){//2页来回点
$('.prev,.first').addClass('disabled');
$('.next,.last').removeClass('disabled');
}else if($(this).attr('data-page')>=2 && $(this).attr('islast')=="false"){//大于2页来回点
$('.prev,.next,.first,.last').removeClass('disabled');
}else if($(this).attr('data-page')>=2 && $(this).attr('islast')=="true"){
$('.prev,.first').removeClass('disabled');
$('.next,.last').addClass('disabled');
}
}else if(($('.first').is('.disabled')&&$('.prev').is('.disabled')&&$('.next').is('.disabled')&&$('.last').is('.disabled')) || $(this).is('disabled')){
console.log(111)
return false;
}else if($(this).is('.last')&&!$('.last').is('.disabled')){
console.log(222)
var aDom=document.querySelectorAll('.numpage');
$('.active').removeClass('active');
var lastDom=getDomByAttr(aDom,'islast','true');
$(lastDom).addClass('active');
$('.prev').attr('data-page',parseInt($(lastDom).attr('data-page'))-1);
$('.last,.next').addClass('disabled');
$('.first,.prev').removeClass('disabled');
}else if($(this).is('.first')&&!$('.first').is('.disabled')){
console.log(333)
var aDom=document.querySelectorAll('.numpage');
$('.active').removeClass('active');
var firstDom=getDomByAttr(aDom,'data-page','1');
$(firstDom).addClass('active');
$('.prev').attr('data-page',1);
$('.next').attr('data-page',2);
$('.last,.next').removeClass('disabled');
$('.first,.prev').addClass('disabled');
}
//显示页数同步
$('.page-input').val($('.active').attr('data-page'));
options.jump(options);
})
//跳转指定页数
$('#'+initDom).on('click','.page-btn',function(){ var aDom=document.querySelectorAll('.numpage');
var addDom=getDomByAttr(aDom,'data-page',$('.page-input').val());
var lastDom=getDomByAttr(aDom,'islast','true');
if($('.page-input').val()<=$(lastDom).html()&&$('.page-input').val()>0){ $('.active').removeClass('active');
$(addDom).addClass('active');
if($('.active').html()==1){
$('.first,.prev').addClass('disabled');
$('.last,.next').removeClass('disabled');
}else if($('.active').html()==$(lastDom).html()){
$('.first,.prev').removeClass('disabled');
$('.last,.next').addClass('disabled');
}else{
$('.first,.prev,.last,.next').removeClass('disabled');
}
$('.prev').attr('data-page',parseInt($('.active').html())-1);
$('.next').attr('data-page',parseInt($('.active').html())+1);
}
options.jump(options);
})
//每页限制条数
$('#'+initDom).on('change','select',function(){
initPage(initDom,count,isFL,isCount,isLimit,isSkip,$(this).val(),pageSizeList);
// console.warn('[警告] ');
options.jump(options);
})
}
initConfig('page',{
count:31,
isFL:true,
isCount:true,
isLimit:true,
isSkip:true,
pageSizeList:[5,10,15,20,25],
jump:function(obj){
console.log(obj)
}
}) </script>
</html>
一个老师的原生js分页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
</head>
<style>
a{margin:0 5px;}
</style>
<body>
<div id="div1"></div>
</body>
<script>
page({
id:'div1',
nowNum:4,
allNum:10,
callback:function(now,all){
alert('当前页'+now+'总共页'+all)
}
})
function page(opt){
if(!opt.id){return false}
var obj=document.getElementById(opt.id);
var nowNum=opt.nowNum || 1;
var allNum=opt.allNum || 5;
var callback=opt.callback || function(){};
if( nowNum >= 4 && allNum >=6){
var oA=document.createElement('a');
oA.href='#'+1;
oA.innerHTML='首页';
obj.appendChild(oA);
}
if(nowNum >= 2){
var oA=document.createElement('a');
oA.href='#'+(nowNum -1);
oA.innerHTML='上一页';
obj.appendChild(oA);
}
if(allNum<=5){
for(var i=0;i<=allNum;i++){
var oA=document.createElement('a');
oA.href='#'+i;
if(nowNum == i ){
oA.innerHTML=i;
}else{
oA.innerHTML='['+i+']';
}
obj.appendChild(oA);
}
}else{
for(var i=1;i<=5;i++){
var oA=document.createElement('a');
if(nowNum == 1 || nowNum == 2){
oA.href='#'+i;
if(nowNum == i){
oA.innerHTML=i;
}else{ oA.innerHTML='['+i+']';
}
}else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1){
oA.href='#'+ (allNum - 5 + i);
if((allNum - nowNum) == 0 && i==5){
oA.innerHTML=(allNum - 5 + i);
}else if((allNum - nowNum) == 1 && i==4){
oA.innerHTML=(allNum - 5 + i);
}else{ oA.innerHTML='['+(allNum - 5 + i)+']';
}
}else{
oA.href='#'+(nowNum - 3 + i);
if(i == 3){
oA.innerHTML=nowNum - 3 + i;
}else{ oA.innerHTML='['+(nowNum - 3 + i)+']';
}
}
obj.appendChild(oA);
}
}
if((allNum - nowNum) >=1 ){
var oA=document.createElement('a');
oA.href='#'+(nowNum + 1);
oA.innerHTML='下一页';
obj.appendChild(oA);
}
if((allNum - nowNum) >=3 && allNum >= 6){
var oA=document.createElement('a');
oA.href='#'+allNum;
oA.innerHTML='尾页';
obj.appendChild(oA);
}
callback(nowNum,allNum);
var aA=obj.getElementsByTagName('a');
for(var i=0;i<aA.length;i++){
aA[i].onclick=function(){
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML='';
page({
id:opt.id,
nowNum:nowNum,
allNum:allNum,
callback:callback
})
return false;
}
}
}
</script>
</html>
加点样式的分页:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>分页</title>
</head>
<style>
a{
padding:5px 10px;
text-decoration: none;
border:1px solid #313c42;
margin-left: -1px;
color: #000; }
.active{
background: #18c752;
color: #fff;
}
</style>
<body>
<div id="div1"></div>
</body>
<script>
page({
id:'div1',
nowNum:4,
allNum:10,
callback:function(now,all){
console.log('当前页'+now+'总共页'+all)
}
})
function page(opt){
if(!opt.id){return false}
var obj=document.getElementById(opt.id);
var nowNum=opt.nowNum || 1;
var allNum=opt.allNum || 5;
var callback=opt.callback || function(){};
if( nowNum >= 4 && allNum >=6){
var oA=document.createElement('a');
oA.href='#'+1;
oA.innerHTML='首页';
obj.appendChild(oA);
}
if(nowNum >= 2){
var oA=document.createElement('a');
oA.href='#'+(nowNum -1);
oA.innerHTML='上一页';
obj.appendChild(oA);
}
if(allNum<=5){
for(var i=0;i<=allNum;i++){
var oA=document.createElement('a');
oA.href='#'+i;
if(nowNum == i ){
oA.innerHTML=i;
oA.className='active';
}else{
oA.innerHTML=i;
}
obj.appendChild(oA);
}
}else{
for(var i=1;i<=5;i++){
var oA=document.createElement('a');
if(nowNum == 1 || nowNum == 2){
oA.href='#'+i;
if(nowNum == i){
oA.innerHTML=i;
oA.className='active';
}else{ oA.innerHTML=i;
}
}else if((allNum - nowNum) == 0 || (allNum - nowNum) == 1){
oA.href='#'+ (allNum - 5 + i);
if((allNum - nowNum) == 0 && i==5){
oA.innerHTML=(allNum - 5 + i);
oA.className='active';
}else if((allNum - nowNum) == 1 && i==4){
oA.innerHTML=(allNum - 5 + i);
oA.className='active';
}else{ oA.innerHTML=(allNum - 5 + i);
}
}else{
oA.href='#'+(nowNum - 3 + i);
if(i == 3){
oA.innerHTML=nowNum - 3 + i;
oA.className='active';
}else{ oA.innerHTML=(nowNum - 3 + i);
}
}
obj.appendChild(oA);
}
}
if((allNum - nowNum) >=1 ){
var oA=document.createElement('a');
oA.href='#'+(nowNum + 1);
oA.innerHTML='下一页';
obj.appendChild(oA);
}
if((allNum - nowNum) >=3 && allNum >= 6){
var oA=document.createElement('a');
oA.href='#'+allNum;
oA.innerHTML='尾页';
obj.appendChild(oA);
}
callback(nowNum,allNum);
var aA=obj.getElementsByTagName('a');
for(var i=0,len=aA.length;i<len;i++){
aA[i].onclick=function(){
var nowNum = parseInt(this.getAttribute('href').substring(1));
obj.innerHTML='';
page({
id:opt.id,
nowNum:nowNum,
allNum:allNum,
callback:callback
})
return false;
}
}
}
</script>
</html>
jQuery+html+css-自己写的分页的更多相关文章
- [原创]jquery+css3打造一款ajax分页插件
最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认为没必要多写js让动画在这些浏览器中实现css3的动画本来就是 ...
- jQuery scroll事件实现监控滚动条分页示例（转）
这篇文章主要介绍了jQuery scroll事件实现监控滚动条分页简单示例,使用ajax加载,同时介绍了(document).height()与$(window).height()的区别,需要的朋友可 ...
- jquery+css3打造一款ajax分页插件
原文:[原创]jquery+css3打造一款ajax分页插件 最近公司的项目将好多分页改成了ajax的前台分页以前写的分页插件就不好用了,遂重写一个 支持IE6+,但没有动画效果如果没有硬需求,个人认 ...
- jquery的css详解（一）
通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...
- jquery修改css样式，样式带!important
由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...
- jQuery和CSS 3定制HTML 5视频播放器
目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...
- jQuery操作css样式
jQuery操作css样式 css操作的分类: css操作 位置操作 尺寸操作 css操作之css css代码: html代码: jQuery代码: 效果如下: css操作之位置操作 css代码: h ...
- 关于jquery的css的一些知识
Query实例CSS 样式表动态选择本实例主要说的还是jquery的选择器,关于jquery的css的一些知识用类似 $("li").css("cursor", ...
- 一个常见下拉菜单的样式：一体化小三角（纯css手写解决）
类似下拉菜单2个一体化小三角,习惯上用字体图标加jQuery处理,比较方便,但是下面纯css手写解决方式,效果也还不错,对CSS知识也是一个比较好的孔固. 小三角用了2种不同处理方式:1.利用bord ...
随机推荐
- 数学 它的内容,方法和意义 第三卷 (A. D. 亚历山大洛夫 著)
第十五章 实变数函数论 1. 绪论 2. 集合论 3. 实数 4. 点集 5. 集合的测度 6. 勒贝格积分 第十六章 线性代数 1. 线性代数的对象和它的工具 2. 线性空间 3. 线性方程组 4. ...
- 数学 它的内容,方法和意义 第二卷 (A. D. 亚历山大洛夫 著)
第五章 常微分方程 1. 绪论 2. 常系数线性微分方程 3. 微分方程的解及应注意的几个方面 4. 微分方程积分问题的几何解释.问题的推广 5. 微分方程解的存在性与唯一性方程的近似解 6. 奇点 ...
- SVN提交强制输入日志信息
在团队开发时,因一些团队成员提交代码时没有写提交说明的习惯,为了规范版本管理,增强大家的团队意识,上网找到了强制录入提交日志的方法.方法如下: 一.编写bat文件,命名为pre-commit.bat, ...
- Primitives vs Objects
这里首先我们要了解什么是primitives 和 objects 其实理解起来很简单. 如果我们懂.NET开发就会知道C#中的值类型和引用类型. primitives variables contai ...
- 列表（list）的增删改查
list 可以通过 索引,切片,切片加步长取出列表中的某个元素 列表的增: # 追加 append() 在列表的后面追加元素 # 插入 insert()在列表的某个位置插入元素 会加在你输入位置的 ...
- java String的intern()方法
intern()方法用于将字符串对象加入常量池中. public native String intern(); intern()方法返回的是一个常量池中的String对象(即常量池中某个String ...
- java JVM JRE JDK三者之间的关系
JDK在包含JRE之外,提供了开发Java应用的各种工具,比如编译器和调试器. JRE包括JVM和JAVA核心类库和支持文件,是Java的运行平台. JVM是JRE的一部分,Java虚拟机的主要工作是 ...
- mysql 主从复制参数slave_net_timeout
slave_net_timeout slave_net_timeout表示slave在slave_net_timeout时间之内没有收到master的任何数据(包括binlog,heartbeat), ...
- hanlp中文智能分词自动识别文字提取实例
需求:客户给销售员自己的个人信息,销售帮助客户下单,此过程需要销售人员手动复制粘贴收获地址,电话,姓名等等,一个智能的分词系统可以让销售人员一键识别以上各种信息 经过调研,找到了一下开源项目 1.wo ...
- Linux rcp命令详解
Linux rcp命令 Linux rcp命令用于复制远程文件或目录. rcp指令用在远端复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件 ...