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
分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...
随机推荐
- 吴恩达机器学习笔记34-模型选择和交叉验证集(Model Selection and Train_Validation_Test Sets)
假设我们要在10 个不同次数的二项式模型之间进行选择: 显然越高次数的多项式模型越能够适应我们的训练数据集,但是适应训练数据集并不代表着能推广至一般情况,我们应该选择一个更能适应一般情况的模型.我们需 ...
- hadoop基础与实践--流程解惑
看过好多本hadoop的书,对整个过程始终存在一些疑问,今天终于搞清楚了.立个low-flag. 整体架构好复杂的感觉?其实不复杂 整体架构,namenode/metanode负责维护所有的元数据,d ...
- 一句话的事儿,Head first 设计模式
head first 设计模式,是比较有趣的一本设计模式的书. 在学校里看书和在工作时看书,意义是不一样的.在学校时是为读书而读书,我们可以从0到1,我们有的是时间.但是工作后就不一样. 我觉得这时的 ...
- Python的简单介绍
0. 前言 最近在从头梳理Python的相关知识,有助于以后更好地学习新知识.这篇博客,我简单介绍一下Python语言的有关内容. 1. Python介绍 Python的创始人为荷兰人吉多·范罗苏姆( ...
- 关键字New,如阴魂不散
本文是溪源翻译的第一篇技术文章,查看原文,因时间仓促,也许翻译过程措辞不当,还请见谅. 当你使用类似于C#或VisualBasic这种强类型语言,在实例化对象时,你往往会使用New这个关键字.我敢保证 ...
- java中的http请求的封装(GET、POST、form表单形式)
目前JAVA实现HTTP请求的方法用的最多的有两种:一种是通过HTTPClient这种第三方的开源框架去实现.HTTPClient对HTTP的封装性比较不错,通过它基本上能够满足我们大部分的需求,Ht ...
- 4-3 组件参数校验与非props特性
本文参考脚本之家,https://www.jb51.net/article/143466.htm 通过属性的形式,父组件对子组件进行参数的传递 //如下图: //父组件设置content属性,向属性中 ...
- Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验
Net Core平台灵活简单的日志记录框架NLog+SqlServer初体验 前几天分享的"[Net Core平台灵活简单的日志记录框架NLog+Mysql组合初体验][http://www ...
- DDD实战进阶第一波(十四):开发一般业务的大健康行业直销系统(订单上下文应用服务用例与接口)
上一篇文章我们主要讲了订单上下文的领域逻辑,在领域逻辑中完成了订单项的计算逻辑.订单的计算逻辑以及如何生成相应的实体code,这篇文章我们通过 在应用服务中实现一个下单的用例,来将这些领域逻辑以及仓储 ...
- 新装mysql数据库登陆不上去(账号密码正确)
Open & Edit /etc/my.cnf Add skip-grant-tables under [mysqld] Restart Mysql You should be able to ...