<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="format-detection" content="telephone=no,email=no,adress=no">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>simplePaging－简洁易用的分页插件</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font: 14px/1.42857143 'Microsoft YaHei', '微软雅黑', '宋体';
color: #333;
background-color: #fff;
min- 1220px;
max- 1920px;
margin: 0 auto;
}
.instructions {
float: right;
margin: 20px;
700px;
}
.instructions table {
100%;
}
.instructions table th,
.instructions table td {
15%;
text-align: center;
border: 1px solid #ccc;
}
.instructions table th:last-child,
.instructions table td:last-child {
55%;
padding-left: 5px;
text-align: left;
}
.part {
margin: 20px;
}
.part p {
padding-left: 2px;
}
.red{
color: red;
}
.page{
height: 30px;
line-height: 30px;
}
</style>
<link rel="stylesheet" href="css/simplePaging.css">
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="js/simplePaging.js"></script>
</head>
<body>
<!--文档说明 开始-->
<!--
<div class="instructions">
<strong>文档说明：</strong>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<th>参数名</th>
<th>参数类型</th>
<th>可选参数</th>
<th>说明</th>
</tr>
<tr>
<td>allPage</td>
<td>number</td>
<td>自定义数字</td>
<td>默认值：12。<span class="red">总页数</span>：页码器总共多少页。</td>
</tr>
<tr>
<td>showPage</td>
<td>number</td>
<td>自定义数字</td>
<td>默认值：5。<span class="red">显示页数</span>：页码器显示几页。</td>
</tr>
<tr>
<td>startPage</td>
<td>number</td>
<td>自定义数字</td>
<td>默认值：1。<span class="red">首页页码数字。</span></td>
</tr>
<tr>
<td>initPage</td>
<td>number</td>
<td>自定义数字</td>
<td>默认值：1。<span class="red">加载完毕自动跳转到第n页</span>：此值小于<span class="red">startPage</span>则跳转首页，反之跳转尾页。</td>
</tr>
<tr>
<td>initPageClick</td>
<td>boolean</td>
<td>true或false</td>
<td>默认值：true(回调)。<span class="red">每次页面加载完毕后，是否触发initPage页的绑定事件</span>,false不回调。</td>
</tr>
<tr>
<td>first</td>
<td>string</td>
<td>自定义字符串</td>
<td>默认值："首页"。<span class="red">首页显示字符</span>。</td>
</tr>
<tr>
<td>last</td>
<td>string</td>
<td>自定义字符串</td>
<td>默认值："尾页"。<span class="red">尾页显示字符</span>。</td>
</tr>
<tr>
<td>prev</td>
<td>string</td>
<td>自定义字符串</td>
<td>默认值："«"。<span class="red">上一页显示字符</span>。</td>
</tr>
<tr>
<td>next</td>
<td>string</td>
<td>自定义字符串</td>
<td>默认值："»"。<span class="red">下一页显示字符</span>。</td>
</tr>
<tr>
<td>showTurnTo</td>
<td>boolean</td>
<td>true或false</td>
<td>默认值：false(不显示)。<span class="red">是否显示“跳转”项</span>，true时显示。为true时，页码输入框输入完毕，按下<span class="red">回车键即可立即执行跳转</span>。输入页码小于<span class="red">startPage</span>跳转首页，反之跳至尾页。</td>
</tr>
<tr>
<td>animateType</td>
<td>string</td>
<td>
"animation"<br/>
"jumpy"<br/>
"fast"<br/>
"normal"<br/>
"slow"<br/>
"verySlow"
</td>
<td>
默认值："animation"。<span class="red">动画过渡模式</span>。<br/>
立即，对应animationTime=0<br/>
100ms，对应animationTime=100<br/>
200ms，对应animationTime=200<br/>
400ms，对应animationTime=400<br/>
800ms，对应animationTime=800<br/>
</td>
</tr>
<tr>
<td>animationTime</td>
<td>number</td>
<td>自定义数字</td>
<td>默认值：300。<span class="red">仅为animateType为animation时生效</span>，设置<span class="red">动画过渡时间(ms)</span>。</td>
</tr>
<tr>
<td>callBack</td>
<td>function</td>
<td>自定义方法</td>
<td>默认值：打印页码。用于<span class="red">回调函数扩展方法</span>。</td>
</tr>
</table>
</div>
<!–文档说明 结束–>
<!–demo 开始–>
<!–默认–>
<div class="part part1">
<p>默认:</p>
<div class="simplePaging"></div>
<script>
$(".simplePaging").simplePaging();
</script>
</div>
<!–总页数88，显示页数8–>
<div class="part part2">
<p>总页数88，显示页数8:</p>
<div class="simplePaging2"></div>
<script>
$(".simplePaging2").simplePaging({
allPage: 88,//总页数
showPage: 8//显示页数
});
</script>
</div>
<!–第一页数字6，初始化跳转到8–>
<div class="part part3">
<p>第一页数字6，初始化跳转到8:</p>
<div class="simplePaging3"></div>
<script>
$(".simplePaging3").simplePaging({
allPage: 88,//总页数
showPage: 9,//显示页数
startPage: 6,//第一页页码数字
initPage: 8//加载完毕自动跳转到第n页
});
</script>
</div>
<!–animationTime设置为50,回调显示页码–>
<div class="part part4">
<p>animationTime设置为50，回调显示页码:</p>
<div class="simplePaging4"></div>
<div class="page simplePaging4PageNum"></div>
<script>
$(".simplePaging4").simplePaging({
allPage: 88,//总页数
showPage: 9,//显示页数
startPage: 1,//第一页页码数字
initPage: 5,//加载完毕自动跳转到第n页
animateType: "animation",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
animationTime: 50,//animateType为animation时，动画过渡时间(ms)
callBack: function (num) {
$(".simplePaging4PageNum").text(num)
}
});
</script>
</div>
<!–animateType为"jumpy"–>
<div class="part part5">
<p>animateType为"jumpy":</p>
<div class="simplePaging5"></div>
<div class="page simplePaging5PageNum"></div>
<script>
$(".simplePaging5").simplePaging({
allPage: 88,//总页数
showPage: 9,//显示页数
animateType: "jumpy",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
callBack: function (num) {
$(".simplePaging5PageNum").text(num)
}
});
</script>
</div>
<!–animateType为"verySlow"–>
<div class="part part6">
<p>animateType为"verySlow":</p>
<div class="simplePaging6"></div>
<div class="page simplePaging6PageNum"></div>
<script>
$(".simplePaging6").simplePaging({
allPage: 88,//总页数
showPage: 9,//显示页数
startPage: 6,//第一页页码数字
initPage: 18,//加载完毕自动跳转到第n页
first: "首页",//首页显示字符
last: "尾页",//尾页显示字符
prev: "«",//上一页显示字符
next: "»",//下一页显示字符
animateType: "verySlow",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
callBack: function (num) {
$(".simplePaging6PageNum").append(num+" ")
}
});
</script>
</div>
-->
<!--显示跳转按钮-->
<div class="part part7">
<p>显示跳转按钮:</p>
<div class="simplePaging7"></div>
<div class="page simplePaging7PageNum"></div>
<script>
$(".simplePaging7").simplePaging({
allPage: 10,//总页数
showPage: 5,//显示页数
startPage: 1,//第一页页码数字
initPage: 1,//加载完毕自动跳转到第n页
showTurnTo: true,//是否显示跳转按钮，false不显示，true显示
animateType: "normal",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
animationTime: 300,//animateType为animation时，动画过渡时间(ms)
callBack: function (num) {
$.ajax({
type:'GET',
//发送请求的地址以及传输的数据
url:'https://www.apiopen.top/satinCommentApi?id=27610708&page='+num+'',
//服务器返回的数据类型
dataType:'json',
success:function(data){
var a=data.data.normal.list;
console.log(a)
$(".simplePaging7PageNum").empty();
for(var i=0;i< a.length;i++){
$(".simplePaging7PageNum").append(a[i].content+'<br/>')
}
},
error:function(jqXHR){
alert(0)
}
});
}
});
</script>
</div>
<!--显示跳转按钮(页面加载完毕不回调callBack)-->
<!--<div class="part part8">
<p>显示跳转按钮(每次页面第一次加载完毕不回调callBack):</p>
<div class="simplePaging8"></div>
<div class="page simplePaging8PageNum"></div>
<script>
$(".simplePaging8").simplePaging({
allPage: 88,//总页数
showPage: 9,//显示页数
startPage: 1,//第一页页码数字
initPage: 1,//加载完毕自动跳转到第n页
initPageClick:false,//每次页面加载完毕后，是否触发initPage页的绑定事件
showTurnTo: true,//是否显示跳转按钮，false不显示，true显示
animateType: "normal",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
animationTime: 300,//animateType为animation时，动画过渡时间(ms)
callBack: function (num) {
$(".simplePaging8PageNum").append(num+" ")
}
});
</script>
</div>-->
<!--demo 结束-->
</body>
</html>
css
.spPage ul li,
.spActiveBg,
.spPrev,
.spFirst,
.spLast,
.spNext,
.spTurnTo input,
.spTurnTo .btn {
display: inline-block;
28px;
height: 28px;
line-height: 28px;
border: 1px solid #ddd;
font-size: 12px;
text-align: center;
vertical-align: top;
*display: block;
*float: left;
}
.spPage ul li,
.spActiveBg,
.spPrev,
.spFirst,
.spLast,
.spNext,
.spTurnTo .btn {
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
cursor: pointer;
}
.spPage ul li:active,
.spActiveBg:active,
.spPrev:active,
.spFirst:active,
.spLast:active,
.spNext:active,
.spTurnTo .btn:active {
color: #f90;
}
.spPrev,
.spNext {
font-size: 16px;
}
.spPage {
display: inline-block;
font-size: 0;
height: 30px;
vertical-align: top;
*display: block;
*float: left;
}
.spTurnTo {
position: relative;
display: inline-block;
font-size: 0;
65px;
height: 30px;
vertical-align: top;
margin-left: 10px;
*display: block;
*float: left;
}
.spTurnTo input {
*margin-left: -10px;
}
.spTurnTo input:focus {
outline: 0;
}
.spTurnTo .btn {;
margin-left: 5px;
}
.spTurnToAllPageTip {
display: none;
position: absolute;
100%;
height: 100%;
line-height: 30px;
top: -100%;
font-size: 12px;
text-align: center;
left: 0;
background-color: #ccc;
z-index: 3;
color: #000;
}
.spTurnTo input:focus ~ .spTurnToAllPageTip {
display: block;
}
.spTurnTo:hover .spTurnToAllPageTip {
*display: block;
}
.spPage .spCover {
position: relative;
150px;
height: 30px;
overflow: hidden;
}
.spActiveBg {
position: absolute;
top: 0;
left: 0;
border: 1px solid transparent;
background-color: #367fa9;
z-index: 2;
}
.spPage ul {
position: absolute;
top: 0;
left: 0;
390px;
font-size: 0;
overflow: hidden;
}
.spPage ul li {
list-style-type: none;
overflow: hidden;
}
.spPage ul li p {
position: relative;
z-index: 3;
}
.spPage ul li.active {
color: #fff;
}
js
/*
* 原创－反馈请邮件至：361899429@qq.com
* 创建于20180426 最后修改20180510
*/
(function ($) {
$.fn.extend({
simplePaging: function (opts) {
//设置默认参数
var opt = {
allPage: 12,//总页数
showPage: 5,//显示页数
startPage: 1,//第一页页码数字
initPage: 1,//加载完毕自动跳转到第n页(初始化激活页)
initPageClick:true,//每次页面加载完毕后，是否触发initPage页的绑定事件
first: "首页",//首页显示字符
last: "尾页",//尾页显示字符
prev: "«",//上一页显示字符
next: "»",//下一页显示字符
showTurnTo: false,//是否显示跳转按钮，true显示，false不显示
animateType: "animation",//过渡模式：动画“animation”、跳动“jumpy”、快速移动“fast”、正常速度移动“normal”、缓慢的速度移动“slow”、异常缓慢的速度移动“verySlow”
animationTime: 300,//animateType为animation时，动画过渡时间(ms)
callBack: function (num) {
console.log(num)
}
};
//合并参数
var option = $.extend(opt, opts);
/*初始化激页码不能大于或小于开始页码*/
if (option.initPage < option.startPage) {
option.initPage = option.startPage
} else if (option.initPage > option.startPage + option.allPage - 1) {
option.initPage = option.startPage + option.allPage - 1
}
/*过渡模式跳动时间设置*/
if (option.animateType !== "animation") {
switch (option.animateType) {
case "jumpy":
option.animationTime = 0;
break;
case "fast":
option.animationTime = 100;
break;
case "normal":
option.animationTime = 200;
break;
case "slow":
option.animationTime = 400;
break;
case "verySlow":
option.animationTime = 800;
break;
}
}
/*显示页至少有1页，并且不能大于总页数*/
option.showPage <= 0 ? option.showPage = 1 : option.showPage;
option.showPage > option.allPage ? option.showPage = option.allPage : option.showPage;
/***************/
var dialog = {};
var simplePaging = $(this);
var spPrev = $("<div class='spPrev'>");
var spFirst = $("<div class='spFirst'>");
var spPage = $("<div class='spPage'>");
var spCover = $("<div class='spCover'>");
var spActiveBg = $("<div class='spActiveBg'>");
var spLast = $("<div class='spLast'>");
var spNext = $("<div class='spNext'>");
var spTurnTo = $("<div class='spTurnTo'>");
var ul = $("<ul>");
var delay = false;//延时，不用修改，此项用于前一个点击未完全执行时，阻止其它事件触发
var init = true;//是否初始化加载页面
var centerShowPage;
if (option.showPage % 2 === 0) {
centerShowPage = Math.floor((option.showPage - 1) / 2)
} else {
centerShowPage = Math.floor(option.showPage / 2)
}
/*程序开始*/
dialog.init = function () {
//插件页码
ul.append(spActiveBg);
for (var i = 0, j = option.startPage; i < option.allPage; i++, j++) {
var li = $("<li>");
li.html("<p>" + j + "</p>").on("click", function () {
if (!delay) {
changePage($(this).text())
}
});
ul.append(li)
}
//上一页
spPrev.text(option.prev).on("click", function () {
if (!delay) {
var num = ul.find("li.active").text() - 1;
changePage(num)
}
});
//首页
spFirst.text(option.first).on("click", function () {
if (!delay) {
var num = ul.find("li:first").text();
changePage(num)
}
});
//尾页
spLast.text(option.last).on("click", function () {
if (!delay) {
var num = ul.find("li:last").text();
changePage(num)
}
});
//下一页
spNext.text(option.next).on("click", function () {
if (!delay) {
var num = ul.find("li.active").text() - 0 + 1;
changePage(num)
}
});
spCover.append(ul);
spPage.append(spCover);
simplePaging.append(spPrev, spFirst, spPage, spLast, spNext);
spCover.width(ul.find("li").outerWidth(true) * option.showPage);//页码中间宽度
ul.width(ul.find("li").outerWidth(true) * option.allPage).find("li").eq(option.initPage - option.startPage).trigger("click");//页码总宽度
//显示跳转
if (option.showTurnTo) {
var input = $("<input type='text'>");
var btn = $("<div class='btn'>");
var spTurnToAllPageTip = $("<div class='spTurnToAllPageTip'>");
input.val(option.startPage).change(function () {
var num = $(this).val();
num > (option.allPage + option.startPage - 1) ? num = (option.allPage + option.startPage - 1) : num;
num <= option.startPage ? num = option.startPage : num;
$(this).val(num);
});
btn.text("跳转").on("click", function () {
if (!delay) {
var num = input.val();
changePage(num)
}
});
$(document).keyup(function (event) {
var e = event || window.event;
var k = e.keyCode || e.which;
if (k == 13 && input.is(":focus")) {
btn.trigger("click");
input.blur();
}
});
spTurnToAllPageTip.text("共" + (option.allPage + option.startPage - 1) + "页");
spTurnTo.append(input, btn, spTurnToAllPageTip);
simplePaging.append(spTurnTo).width(ul.find("li").outerWidth(true) * (option.showPage + 6) + 15);
} else {
simplePaging.width(ul.find("li").outerWidth(true) * (option.showPage + 4));
}
};
/*改变页码函数*/
function changePage(num) {
if (num < option.startPage || num > option.allPage + option.startPage - 1) {
return false;
} else if (ul.find("li.active").text() == num&&!init) {
return false;
} else if (isNaN(num)) {
return false;
}
delay = !delay;
num = Number(num);
var leng = num - option.startPage;
var liWidth = ul.find("li").outerWidth(true);
ul.find("li.active").removeClass("active");
spActiveBg.animate({"left": liWidth * (num - option.startPage)}, option.animationTime);
if (leng <= centerShowPage) {
ul.animate({"left": 0}, option.animationTime, function () {
autoActive()
});
} else if (leng >= option.allPage - centerShowPage - 1) {
ul.animate({"left": -liWidth * (option.allPage - option.showPage)}, option.animationTime, function () {
autoActive()
});
} else {
ul.animate({"left": -liWidth * (leng - centerShowPage)}, option.animationTime, function () {
autoActive()
});
}
function autoActive() {
delay = !delay;
ul.find("li").eq(num - option.startPage).addClass("active");
if(init){
init = false;
if(option.initPageClick){
option.callBack(num);
}
}else {
option.callBack(num);
}
}
}
dialog.init();
}
});
})(jQuery);