jQuery封装的分页组件

前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个。
在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我就给大家看一下我的这个分页。
你可以自行改变内容代码来达到你的目的,例如:样式的问题,你就可以自行调整css样式。

1.看一下效果

2.下面就是具体介绍一下

(1)、首先是css样式(可自行调节)当然你页可以外链一个css,最后会有整体的代码展示!

     body,
html {
width: 100%;
height: 100%;
} * {
margin: 0;
padding: 0;
} .page {
width: 100%;
margin: 100px auto;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
} .pages {
/*width: 80%;*/
display: block;
height: 34px;
position: relative;
text-align: center;
overflow: hidden;
} .all_data {
color: #6699FF;
} .all_pages {
color: #6699FF;
} .page_left {
width: 200px;
height: 32px;
line-height: 32px;
font-size: 14px;
text-align: center;
} .page_footer {
width: 180px;
height: 35px;
position: relative;
margin-left: 24px;
} .page_cont>div {
display: block;
position: relative;
float: left;
line-height: 32px;
text-align: center;
} .hometrailer {
width: 64px;
height: 32px;
background: rgba(255, 255, 255, 1);
border-radius: 3px;
border: #E3E3E3 1px solid;
cursor: pointer;
} .updown {
width: 84px;
height: 32px;
background: rgba(255, 255, 255, 1);
border-radius: 3px;
border: #E3E3E3 1px solid;
cursor: pointer;
} .page_view {
height: 32px;
position: relative;
} .page_view ul {
overflow: hidden;
} .li {
width: 32px;
height: 32px;
background: rgba(255, 255, 255, 1);
border-radius: 3px;
color: #666;
float: left;
list-style: none;
margin-left: 8px;
border: #E3E3E3 1px solid;
cursor: pointer;
} .active {
background: rgba(96, 129, 255, 1)!important;
color: #fff !important;
} .pages>div {
display: block;
float: left;
line-height: 32px;
text-align: center;
} .page_input {
display: inline-block;
width: 64px;
height: 30px;
background: rgba(255, 255, 255, 1);
border-radius: 3px;
border: #E3E3E3 1px solid;
outline: none;
font-size: 14px;
text-align: center;
} .page_btn {
display: inline-block;
width: 84px;
height: 32px;
background: rgba(96, 129, 255, 1);
border-radius: 3px;
color: #fff;
line-height: 32px;
text-align: center;
font-size: 14px;
} .page_home {
margin-right: 8px;
} .page_trailer {
margin-left: 8px;
} .page_down {
margin-left: 8px;
w
} .page_down_two {
margin-left: 8px;
}

(2)、js代码(你可以在中设置许多需求, 例如:你不需要共有多少页,那么就就可以直接在就是代码中删除)

 function Page(settings) {
this.settings = settings;
this.init();
}
//默认配置
Page.prototype = {
init: function() {
this.create();
},
create: function() {
var _template = `<div class="pages">
<div class="page_left">
共 <span class="all_data">${this.settings.count}</span> 条信息/共 <span class="all_pages">${this.settings.countPage}</span> 页
</div>
<div class="page_cont">
<div class="hometrailer page_home">首页</div>
<div class="updown page_up">上一页</div>
<div class="page_view">
<ul class="page_view_ul">
</ul>
</div>
<div class="updown page_down">下一页</div>
<div class=" hometrailer page_trailer">尾页</div>
</div>
<div class="page_footer">
<input type="text" class="page_input" />
<span>页</span>
<span class="page_btn">跳转</span>
</div>
</div>`;
$(this.settings.container).append(_template);
this.refreshDom(this.settings);
this.bindEvent();
},
bindEvent: function() {
var _this = this;
//跳转首页
$(this.settings.container).on("click", ".page_home", function() {
var newpages = 1;
_this.settings.nowPage = newpages;
_this.settings.callBack(_this.settings.nowPage)
_this.refreshDom(this.settings);
});
//跳转上一页
$(this.settings.container).on("click", ".page_up", function() {
var newpages = _this.settings.nowPage;
newpages--;
if(newpages < 1) {
newpages = 1
_this.settings.nowPage = newpages
} else {
_this.settings.nowPage = newpages
}
_this.settings.callBack(_this.settings.nowPage)
_this.refreshDom(this.settings);
});
//跳转下一页
$(this.settings.container).on("click", ".page_down", function() {
var newpages = _this.settings.nowPage;
newpages++;
if(newpages > _this.settings.countPage) {
newpages = _this.settings.countPage
_this.settings.nowPage = newpages
} else {
_this.settings.nowPage = newpages
}
_this.settings.callBack(_this.settings.nowPage)
_this.refreshDom(this.settings);
});
//跳转末页
$(this.settings.container).on("click", ".page_trailer", function() {
var newpages = _this.settings.countPage;
_this.settings.nowPage = newpages;
_this.settings.callBack(_this.settings.nowPage)
_this.refreshDom(this.settings);
});
//Go跳转
$(this.settings.container).on("click", ".page_btn", function() {
var inputText = $(".page_input").val() - 0;
if(inputText < 1 || inputText > _this.settings.countPage) {
alert("输入的页面不正确,请重新输入")
} else {
_this.settings.nowPage = inputText;
_this.settings.callBack(_this.settings.nowPage)
_this.refreshDom(this.settings);
// establish(objpage);
//外部的ajax
}
});
},
refreshDom: function() {
var _this = this;
$(".li").remove();
var countPage = this.settings.countPage;
var showPageCount = this.settings.showPageCount;
var nowPage = this.settings.nowPage - 0;
var count = this.settings.count;
var bian = (showPageCount - 1) / 2;
$(".all_data").html(count);
$(".all_pages").html(countPage);
var html = "";
if(nowPage - bian <= 0) {
for(var i = 1; i < showPageCount + 1; i++) {
var index = i;
if(nowPage == index) {
pageHtml = ` <li index="${i}" class="li active">${i}</li>`;
} else {
pageHtml = ` <li index="${i}" class="li">${i}</li>`;
}
html += pageHtml;
}
} else if(nowPage - bian > 0 && nowPage + bian < countPage) {
var num = nowPage - bian;
for(var i = num; i < (num + showPageCount); i++) {
var index = i;
if(nowPage == index) {
pageHtml = ` <li index="${i}" class="li active">${i}</li>`;
} else {
pageHtml = ` <li index="${i}" class="li">${i}</li>`;
}
html += pageHtml;
} } else if(nowPage + bian >= countPage) {
var numAll = countPage - showPageCount + 1;
for(var i = numAll; i < (numAll + showPageCount); i++) {
var index = i;
if(nowPage == index) {
pageHtml = ` <li index="${i}" class="li active">${i}</li>`;
} else {
pageHtml = ` <li index="${i}" class="li">${i}</li>`;
}
html += pageHtml;
}
} $(".page_view_ul").append(html) $(".li").click(function() {
_this.settings.nowPage = $(this).attr("index")-0;
_this.settings.callBack(_this.settings.nowPage)
_this.refreshDom(this.settings);
})
}
};
var pageInit = function(opts) {
return new Page(opts);
}; window.pageInit = $.pageInit = pageInit;

(3)、初始化js(具体参数有具体详解,你可已根据你的需求添加新的参数)

    <script type="text/javascript">
$.pageInit({
container: '.page', //容器:默认page
countPage: 20, //一共有多少页
showPageCount: 5, //显示多少个分页按钮
nowPage: 1, //当前是第几页
count: 100, //数据总数
callBack: function(data) {
console.log("data___________")
//当前的页码
console.log("当前的页码为:"+data)
}
});
</script>

(4)、html代码(封装好的js和css,直接来看吧!)

 <!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>分页示例</title>
<style type="text/css">
body,
html {
width: 100%;
height: 100%;
} * {
margin: 0;
padding: 0;
} .page {
width: 100%;
margin: 100px auto;
height: 34px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
<link rel="stylesheet" type="text/css" href="css/page.css" />
</head>
<body>
<div class="page"> </div> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="js/page.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$.pageInit({
container: '.page', //容器:默认page
countPage: 20, //一共有多少页
showPageCount: 5, //显示多少个分页按钮
nowPage: 1, //当前是第几页
count: 100, //数据总数
callBack: function(data) {
console.log("data___________")
//当前的页码
console.log("当前的页码为:"+data)
}
});
</script>
</body> </html>

  • 最后,如有错误,请大家即使提出,我会及时改正
  • 本人才疏学浅,请大家多多包涵!

基于jQuery封装的分页组件(可自定义设置)的更多相关文章

  1. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  2. 基于vue2.0的分页组件开发

    今天安排的任务是写基于vue2.0的分页组件,好吧,我一开始是觉得超级简单的,但是越写越写不出来,写的最后乱七八糟的都不知道下句该写什么了,所以重新捋了思路,小结一下- 首先写组件需要考虑: 要从父组 ...

  3. 源码来袭!!!基于jquery的ajax分页插件(demo+源码)

    前几天打开自己的博客园主页,无意间发现自己的园龄竟然有4年之久了.可是看自己的博客列表却是空空如也,其实之前也有写过,但是一直没发布(然而好像并没有什么卵用).刚开始学习编程时就接触到博客园,且在博客 ...

  4. 基于jQuery自适应宽度跟高度可自定义焦点图

    基于jQuery自适应宽度跟高度可自定义焦点图.这是一款带左右箭头,缩略小图切换的jQuery相册代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <section cl ...

  5. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  6. 基于avalon1.4.x ----分页组件编写

    avalon分页组件 (1.4.x版本) 随着avalon2的推出,avalon1的官网已经不再维护了,现在似乎是找不到avalon 1.4版本的官方文档了,所以本文章所有的内容均不保证正确性,只能保 ...

  7. Django 分页组件替换自定义分页

    Django的分页器(paginator) 总之不太好用我们还是用自己的好一些 自定义分页器 分页实现源码 """ 自定义分页组件 """ ...

  8. 基于jquery 封装的 select 小控件,解决 IE6 7 8里 select 边框 高度 无法遮挡等问题

    一.基本原理 select控件在浏览器中是个永远的痛,不同的版本解析出来的可谓五花八门.主要有以下问题: 1,IE6中无法设置高度,Z INDEX永远在最上,无法被其它层遮挡 2,IE7中可以设置高度 ...

  9. 基于jQuery封装一个瀑布流插件

    /*封装一个瀑布流插件*/ (function($){ $.fn.WaterFall = function(){ /*这是你初始化 调用这个方法的时候的 那个jquery选着到的dom对象 this* ...

随机推荐

  1. 点云网格化算法---MPA

    MPA网格化算法思路 第一步:初始化一个种子三角面.(随机选点,基于该点进行临近搜索到第二点:在基于该线段中点临近搜索到第三点) 图1 第二步:在种子三角面的基础上,进行面片的扩充,利用边的中点进行临 ...

  2. Win7下使用TortoiseGit设置保存密码

    1. 打开 TortoiseGit 设置,编辑 .gitconfig 文件,如图: 2. 添加下面两行配置,如图: [credential] helper = store 3. 保存退出即可

  3. JavaScript对象的常用属性及使用

    什么是浏览器对象模型? 浏览器对象模型(BOM Browser Object Model)是JavaScript的组成之一,它提供了独立于内容和浏览器窗口进行交互的对象,使用浏览器对象模型可以实现与H ...

  4. delphi : 窗体的close,free,destroy

    一.我用application.create(TForm2,Form2)语句,创建了Form2,可是调用了Form2.close后,重新调用Form2.show. 刚才所创建的Form2仍然存在.问为 ...

  5. hadoop报错WARN util.NativeCodeLoader: Unable to load native-hadoop library for your platform... using builtin-java classes where applicable

    19/06/14 10:44:58 WARN common.Util: Path /opt/hadoopdata/hdfs/name should be specified as a URI in c ...

  6. win10在文件夹下打开powershell

    快捷键win+R,输入cmd可以直接打开终端命令行窗口 在文件夹下打开终端命令行端口: 在需要的文件夹目录下,按住shift键,在空白处右击,选择在此处打开powershell窗口,即可进行终端命令行 ...

  7. cocos2dx基础篇(15) 列表视图CCTableView

    [3.x] (1)去掉 "CC" (2)TableViewCell 中: > unsigned int getIdx() 返回类型改为 ssize_t(类型为 long) ( ...

  8. 【Qt开发】如何将内存图像数据封装成QImage V1

    如何将内存图像数据封装成QImage 当采用Qt开发相机数据采集软件时,势必会遇到采集内存图像并进行处理(如缩放.旋转)操作.如果能够将内存图像数据封装成QImage,则可以利用QImage强大的图像 ...

  9. 【监控实践】【4.2】perfmon监控性能计数器(基于typeperf命令)

    关键词:typeperf typeperf 命令 使用示例: 案例1:#使用typeperf收集windows cpu.内存.硬盘性能 #使用typeperf收集windows cpu.内存.硬盘性能 ...

  10. Sequential game

    Sequential game Problem Description Sequential detector is a very important device in Hardware exper ...