参考: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)的更多相关文章

  1. jQuery分页插件(jquery.page.js)的使用

    效果描述: 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单,效果很棒   1.前端   首先html的head中引入相关css与js <lin ...

  2. Jquery 分页插件 Jquery Pagination

    Jquery 分页插件 Jquery Pagination 分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也 ...

  3. Bootstrap的js分页插件属性介绍

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富,个人觉得这款插件已经无可挑剔了.它提供了一系列的参数用来支持用户的定 制,提供了公共的方法可随时获得插件状 ...

  4. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  5. Jquery.Page.js 分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...

  6. 分页插件jquery.simplePagination.js使用

    利用ecshop后台,利用插件更改分页显示样式遇到的问题,由于是利用Ajax获取数据进行页面数据更新?所以出现了以下情况: 初始化页面前 : 分页更新后: 点击后出现了分页插件内容消失, 原因:分页一 ...

  7. JQuery.Page.js分页插件的使用

    1.简单直接贴代码 需要引用以下样式和脚本 <link href="~/Scripts/Page/pager.css" rel="stylesheet" ...

  8. 分页插件 jquery.pagination.js

    引用 <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <lin ...

  9. 分享一个Jquery 分页插件 Jquery Pagination

    分页插件来说,我觉得适用就行,尽量简单然后能够根据不同的应用场景能够换肤.展现形式等. 对于初学者想写分页插件的同学,也可以看下源码,代码也挺简单明了的,也助于自己写个小插件. 不过我比较懒,一般直接 ...

随机推荐

  1. Java 利用枚举封装接口返回 JSON 结构

    利用枚举封装返回码和返回信息 package com.template.project.util; public enum StatusCode { SUCCESS(20000, "成功&q ...

  2. #Java学习之路——基础阶段(第二篇)

    我的学习阶段是跟着CZBK黑马的双源课程,学习目标以及博客是为了审查自己的学习情况,毕竟看一遍,敲一遍,和自己归纳总结一遍有着很大的区别,在此期间我会参杂Java疯狂讲义(第四版)里面的内容. 前言: ...

  3. 微信昵称的emoji的尝试性解决方案

    概述 之前分享过前端页面使用emoji,讨论了前端页面使用emoji的方法,但是微信昵称中的emoji怎么获取和显示呢?我查找了一些资料,把心得记录下来,供以后开发时参考,相信对其他人也有用. 转码问 ...

  4. 《http权威指南》读书笔记4

    概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...

  5. [Postman]捕获HTTP请求(14)

    如果您使用API​​构建客户端应用程序 - 移动应用程序,网站或桌面应用程序 - 您可能希望查看应用程序中发送和接收的实际HTTP请求流量.在某些情况下,您可能会发现甚至没有记录的API.Postma ...

  6. 一篇文章读懂HTTPS及其背后的加密原理

    HTTPS(全称: Hypertext Transfer Protocol Secure,超文本传输安全协议),是以安全为目标的HTTP通道,简单讲是HTTP的安全版.本文,就来深入介绍下其原理. 1 ...

  7. 可能是把Java内存区域讲的最清楚的一篇文章

    写在前面(常见面试题) 下面是面试官可能在“Java内存区域”知识点问你的问题,快拿出小本本记下来! 基本问题: 介绍下Java内存区域(运行时数据区). Java对象的创建过程(五步,建议能默写出来 ...

  8. Metrics.NET源码阅读笔记

    概述 Metrics.NET提供的是度量工具,他是移植自Java的metrics.Metrics将度量抽象成Gauges,Counters,Histograms,Meters,Timers五种.基于这 ...

  9. 机器学习基石笔记:02 Learning to Answer Yes/No、PLA、PA

    原文地址:https://www.jianshu.com/p/ed0aee74523f 一.Perceptron Learning Algorithm (一)算法原理 PLA本质是二元线性分类算法,即 ...

  10. redux源码学习笔记 - combineReducers

    上一篇有了解到,reducer函数的两个为:当前state和此次dispatch的action. state的结构是JavaScript对象,每个key都可以代表着不同意义的数据.比如说 { list ...