js 分页插件(jQuery)
参考:http://www.jb51.net/article/117191.htm 侵删
css 部分
@charset "utf=8";
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
.page{
font-size: 13px;
text-align: center;
margin-top: 20px;
}
.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: 2px 10px;
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: #32c5d2;
color: #FFFFFF;
font-weight: bold;
}
js 部分
(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 = '<div class="page">' +
'<span class="page_details">' +
'共<span class="page_num">' + this.settings.totalLists + '</span>条记录,' +
'第<span class="page_current">' + curPage + '</span>/' +
'<span class="page_size">' + this.settings.totalPages + '</span>页' +
'</span>' +
'<div class="page_to">' +
'<ul class="flex_parent">' +
'<li class="page_first flex_child">首页</li>' +
'<li class="page_pre page_hide flex_child">« 上一页</li>' +
'<li class="page_next flex_child">下一页 »</li>' +
'<li class="page_last flex_child">末页</li>' +
'</ul>' +
'</div>' +
'<div class="page_jump">' +
'<span>第:<input type="number" class="page_jump_input" value="' + this.settings.inputVal + '">页</span>' +
'<input type="button" class="page_jump_btn" value="Go">' +
'</div>' +
'</div>';
$(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 < totals) {
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_last", function() { lists = $(_this.settings.container).find(".page_num").text();
totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) {
curPage = totals;
isTrue = _this.settings.callBack(curPage);
if (isTrue) {
_this.refreshDom();
$(_this.settings.container).find(".page_current").text(totals);
$(_this.settings.container).find(".page_jump_input").val(curPage);
}
}
});
//Go跳转
$(this.settings.container).on("click", ".page_jump_btn", function() {
lists = $(_this.settings.container).find(".page_num").text();
totals = $(_this.settings.container).find(".page_size").text(); if ($.isFunction(_this.settings.callBack)) {
jumpVal = Number($(_this.settings.container).find("input.page_jump_input").val());
// console.log('跳转的页数:' + jumpVal + ';跳转之前的页数:' + curPage);
isTrue = _this.settings.callBack(jumpVal);
if (jumpVal >= 1 && jumpVal <= totals) {
curPage = jumpVal;
// 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);
}
} 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);
调用
function page(){
$.pageInit({
container: '.page', //容器:默认page
setPos: '.pageBox', //放置位置:默认body
totalPages: totalPages, //总页数:必填(后台返回的,加载列表可以取到)
totalLists: totalCount, //数据总数:必填(后台返回的,加载列表可以取到)
initPage: pageNo, //初始页码:默认1(后台会返回,自己也可以定义)
inputVal: 1, //设置跳转的input值:默认1
//要执行的函数:默认null,必须为fn且返回true则可执行分页,false则不执行
callBack: function(n) {
var flag = true;
console.log(n);
getCustomerList(n); //getCustomerList 是加载列表的方法;n 为返回的页码数,
return flag;
}
});
};
js 分页插件(jQuery)的更多相关文章
- jQuery分页插件(jquery.page.js)的使用
效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒 1.前端 首先html的head中引入相关css与js <lin ...
- Jquery 分页插件 Jquery Pagination
Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...
- Bootstrap的js分页插件属性介绍
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- Jquery.Page.js 分页插件的使用
1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...
- 分页插件jquery.simplePagination.js使用
利用ecshop后台,利用插件更改分页显示样式遇到的问题,由于是利用Ajax获取数据进行页面数据更新?所以出现了以下情况: 初始化页面前 : 分页更新后: 点击后出现了分页插件内容消失, 原因:分页一 ...
- JQuery.Page.js分页插件的使用
1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...
- 分页插件 jquery.pagination.js
引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...
- 分享一个Jquery 分页插件 Jquery Pagination
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
随机推荐
- 动态创建数据table
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Python - Fabric简介
1 - Fabric Fabric是一个Python的库,提供了丰富的同SSH交互的接口,可以用来在本地或远程机器上自动化.流水化地执行Shell命令. 非常适合用来做应用的远程部署及系统维护.简单易 ...
- Python 游戏之旅(Pygame)
Pygame是跨平台Python模块,专为电子游戏设计,包含图像.声音.建立在SDL基础上,允许实时电子游戏研发而无需被低级语言(如机器语言和汇编语言)束缚.基于这样一个设想,所有需要的游戏功能和理念 ...
- spark面试总结4
Spark on Yarn面试篇04 1.MRV1有哪些不足? 1)可扩展性(对于变化的应付能力) a) JobTracker内存中保存用户作业的信息 b) JobTracker使用的是粗粒度的锁 2 ...
- python元组和字典的简单学习
元组(tuple) 用圆括号()标识,定义元组后,元组元素不可修改.如果想修改元组只能重新定义元组. 因为元组不可更改,所以也没有增删改等用法,主要语法就是访问元组元素,遍历元组. 访问元组元素: t ...
- [Objective-C语言教程]数组(14)
Objective-C编程语言提供了一种叫作数组的数据结构,它可以存储相同类型的固定大小顺序元素的集合.数组用于存储数据集合,但将数组视为相同类型的变量集合通常更有用. 可以声明一个数组变量(例如nu ...
- [EXP]IIS全版本提权工具
工具: iislpe.exe 编译: .net 3.5 全版本IIS提权工具,支持IIS应用池用户/网络服务用户/本地服务用户 原理: 通过NTLM重放将权限提升至SYSTEM权限,详情参 ...
- ionic3 ionic serve build fail Error: webpackJsonP is not defined
ionic升级后发现 ionic serve 跑起来项目出现一下错误: Runtime Error: webpackJsonP is not definedStack: @http://localho ...
- java提高(3)---正则表达式(2)
正则表达式 说真的正则表达式真不好写,当我收集资料准备开始写的时候,发现收集的东西越来越多范围也越来越广,我文章的前提就是文章要清晰, 在缕清自己思路之后,我从先简后难的方式来写有关正表达式,你们如果 ...
- sql server 性能调优之 资源等待之网络I/O
一.概述 与网络I/O相关的等待的主要是ASYNC_NETWORK_IO,是指当sql server返回数据结果集给客户端的时候,会先将结果集填充到输出缓存里(ouput cache),同时网络层会开 ...