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 ...
随机推荐
- Go程序语言设计 (艾伦 A. A. 多诺万 著)
第1章 入门 (已看) 1.1 hello,world package main import "fmt" func main(){ fmt.Println("Hell ...
- Javascript高级调试——console.table()
原文:http://www.mariusschulz.com/2013/11/13/advanced-javascript-debugging-with-consoletable 本文只是简单翻译,部 ...
- mysql——创建索引、修改索引、删除索引的命令语句
查看表中已经存在 index:show index from table_name; 创建和删除索引索引的创建可以在CREATE TABLE语句中进行,也可以单独用CREATE INDEX或ALTER ...
- c/c++ 获取数组长度
在C/C++中并没有提供直接获取数组长度的函数 c/c++ 获取数组长度其中一种方法是使用sizeof(array) / sizeof(array[0]). 在C语言中习惯上在使用时都把它定义成一个宏 ...
- Eureka Client的使用
1. 新建工程 下一步,名字叫client 选择Cloud Discovery->Eureka Discovery 下一步后,点击完成 2. 在ClientApplication文件中增加Ena ...
- 自然语言处理hanlp的入门基础
此文整理的基础是建立在hanlp较早版本的基础上的,虽然hanlp的最新1.7版本已经发布,但对于入门来说差别不大!分享一篇比较早的“旧文”给需要的朋友! 安装HanLP HanLP将数据与程序分 ...
- ML平台_PAI参考
阿里云机器学习PAI(Platform of Artificial Intelligence)是一款一站式的机器学习平台,包含数据预处理.特征工程.常规机器学习算法.深度学习框架.模型的评估以及预测这 ...
- Action<T> Delegate
来源:https://docs.microsoft.com/zh-cn/dotnet/api/system.action-1?view=netframework-4.7.2 Action<T&g ...
- 浅谈负margin
通常来说margin为正值时,我们很清楚其布局形式,即在border边界线处再往外扩展指定长度.可margin为负又表示什么呢,表示始于border边界线处并向内扩展指定长度,这样,下一个文档流对象便 ...
- windows安装mysql数据库并修改密码
1.下载 MySQL Community Server https://dev.mysql.com/downloads/mysql/ 2.解压 如果想要让MySQL安装在指定目录,那么就将解压后的文件 ...