由于项目需要实现分页效果，上
jquery
插件库找了下，但是木有找到自己想要的效果，于是自己封装了个分页组件。本文主要为大家详细介绍了基于jquery封装的分页组件，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
思路：
主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果。
1.page.init.css
2.pageInit.js
3.组件调用
通过 window.pageInit= $.pageInit=pageInit 可完成分页组件初始化。
暴露出来的接口分别为：
1.container：DOM的容器，默认.page
2.setPos：DOM放置的HTML位置，默认body
3.totalPages：默认的页数，必填，默认null
4.totalLists：默认的数据总数，必填，默认null
基于jQuery的AJAX和JSON的实例 中文WORD版
本文档主要讲述的是基于jQuery的AJAX和JSON的实例；过jQuery内置的AJAX功能，直接访问后台获得JSON格式的数据，然后通过jQuer把数据绑定到事先设计好的html模板上，直接在页面上显示。有需要的朋友可以下载看看
下载
5.initPage：当前页,默认第一页
6.inputVal：跳转页，默认第一页
7.callBack：执行的回调函数，必填，默认null
效果：
通过callBack接口，添加自己所需要执行的function函数，并且需要return true时才回执行动态的DOM渲染。
更多精彩内容请点击：jquery分页功能汇总进行学习。
相关推荐：
jQuery封装placeholder的实例代码
基于jquery封装的一个js分页_jquery
jquery封装的对话框简单实现_jquery
@charset "utf=8";
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.page{
font-size: 13px;
text-align: right;
}
.page .page_to{
display: inline-block;
max-width: 250px;
}
.page .page_to li{
display: inline-block;
width: auto;
height: auto;
border: 1px solid #ddd;
padding:5px 10px;
border-left-width: 0;
color: #323232;
cursor: pointer;
}
.page .page_to li.page_hide{
display: none;
}
.page .page_to li:hover{
color: #32C2CD;
background-color: #f4f4f4;
border-color: #DDDDDD;
}
.page .page_to li:first-child{
border-left-width: 1px;
}
.page .page_jump{
display: inline-block;
width: 180px;
}
.page .page_jump input.page_jump_input{
width: 52px;
height: 28px;
text-align: center;
text-decoration: none;
background-color: #fff;
border: 1px solid #ddd;
margin:0 4px;
}
.page .page_jump input.page_jump_btn{
display: inline-block;
padding: 7px 20px;
margin-left: 5px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border: 1px solid transparent;
border-radius: 4px;
background-color: #00BB9C;
color: #FFFFFF;
font-weight: bold;
}/**
* Created: 2017/6/20.
* author: Aaron
* address: http://www.cnblogs.com/aaron-pan/
*/
(function($,window,undefined){
var curPage='',
//跳转是否有值
jumpVal='',
//从DOM中重新获取数据总数/总页数
lists='',
totals='',
//是否返回值
isTrue=false;
var Page=function(opts){
this.settings= $.extend({},Page.defaults,opts);
curPage=this.settings.initPage;
totals=this.settings.totalPages;
jumpVal=this.settings.inputVal;
this.init();
};
//默认配置
Page.defaults={
container:'.page',
setPos:'body',
totalPages:null,
totalLists:null,
initPage:1,
inputVal:1,
callBack:null
};
Page.prototype={
init:function(){
this.create();
},
create:function(){
var _template=''+
''+
'共'+this.settings.totalLists+'条记录，'+
'第'+curPage+'/'+
''+this.settings.totalPages+'页'+
''+
'
'+
'
'+
'- 首页
'+
'- « 上一页
'+
'- 下一页 »
'+
'- 末页
'+
'
'+
''+
''+
'第：页'+
''+
'
'+
'';
$(this.settings.setPos).append(_template);
this.refreshDom();
this.bindEvent();
},
bindEvent:function(){
var _this=this;
//跳转首页
$(this.settings.container).on("click",".page_first",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
curPage=1;
isTrue=_this.settings.callBack(1);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(1);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
});
//跳转上一页
$(this.settings.container).on("click",".page_pre",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
if(curPage>1){
curPage=curPage-1;
isTrue=_this.settings.callBack(curPage);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(curPage);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
}
});
//跳转下一页
$(this.settings.container).on("click",".page_next",function(){
lists=$(_this.settings.container).find(".page_num").text();
totals=$(_this.settings.container).find(".page_size").text();
if($.isFunction(_this.settings.callBack)){
if(curPage=1 && jumpVal <=totals){
curPage=jumpVal;
isTrue=_this.settings.callBack(curPage);
if(isTrue){
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(curPage);
}
}else{
jumpVal=curPage;
}
}
});
},
refreshDom:function(){
$(this.settings.container).find("li.flex_child").removeClass("page_hide");
if(Number(totals)==1){
$(this.settings.container).find(".page_pre").addClass("page_hide");
$(this.settings.container).find(".page_next").addClass("page_hide");
}
else if(Number(totals)==2){
if(Number(curPage)==1){
$(this.settings.container).find(".page_pre").addClass("page_hide");
}else{
$(this.settings.container).find(".page_next").addClass("page_hide");
}
}
else if(Number(curPage)==1 && Number(totals)>2){
$(this.settings.container).find(".page_pre").addClass("page_hide");
}
else if(Number(curPage)==Number(totals) && Number(totals)>2){
$(this.settings.container).find(".page_next").addClass("page_hide");
}
}
};
var pageInit=function(opts){
return new Page(opts);
};
window.pageInit= $.pageInit=pageInit;
})(jQuery,window,undefined);
基于jQuery封装的分页组件