目录
一、效果图
二、分页 js 源码讲解
新建一个 js 文件,基本直接复制粘贴就行,记得引入到需要的页面中。
需要注意的是:
前面的构造函数,是用来初始化前端分页的,在需要实现分页的页面的 js 文件中调用这个构造函数,进行分页的初始化。
后面的 JumpToPage(pageIndex); 函数,是用来实现页面跳转的,是在需要实现分页的页面的 js 文件中去实现这个函数。
到这里如果还不知道是什么意思,或者怎么实现的,没事!!!直接往下看。
(function($, window, document) {
// 定义构造函数
function Paging(el, options) {
this.el = el;
this.options = {
pageNo : options.initPageNo || 1, // 初始页码
totalPages : options.totalPages || 1, // 总页数
totalCount : options.totalCount || '', // 条目总数
slideSpeed : options.slideSpeed || 0, // 缓动速度
jump : options.jump || false, // 支持跳转
callback : options.callback || function() {
} // 回调函数
};
this.init();
}
// 给实例对象添加公共属性和方法
Paging.prototype = {
constructor : Paging,
init : function() {
this.createDom();
this.bindEvents();
},
createDom : function() {
var that = this, ulDom = '', jumpDom = '', content = '', liWidth = 60, // li的宽度
totalPages = that.options.totalPages, // 总页数
wrapLength = 0;
totalPages > 5 ? wrapLength = 5 * liWidth : wrapLength = totalPages
* liWidth;
for (var i = 1; i <= that.options.totalPages; i++) {
i != 1 ? ulDom += '<li>' + i + '</li>'
: ulDom += '<li class="sel-page">' + i + '</li>';
}
that.options.jump ? jumpDom = '<input type="text" placeholder="1" class="jump-text" id="jumpText"><button type="button" class="jump-button" id="jumpBtn">跳转</button>'
: jumpDom = '';
content = '<button type="button" id="firstPage" class="turnPage first-page">首页</button>'
+ '<button class="turnPage" id="prePage">上一页</button>'
+ '<div class="pageWrap" style="width:'
+ wrapLength
+ 'px">'
+ '<ul id="pageSelect" style="transition:all '
+ that.options.slideSpeed
+ 'ms">'
+ ulDom
+ '</ul></div>'
+ '<button class="turnPage" id="nextPage">下一页</button>'
+ '<button type="button" id="lastPage" class="last-page">尾页</button>'
+ jumpDom
+ '<p class="total-pages">共 '
+ that.options.totalPages
+ ' 页</p>'
+ '<p class="total-count">'
+ that.options.totalCount
+ '</p>';
that.el.html(content);
},
bindEvents : function() {
var that = this, pageSelect = $('#pageSelect'), // ul
lis = pageSelect.children(), // li的集合
liWidth = lis[0].offsetWidth, // li的宽度
totalPages = that.options.totalPages, // 总页数
pageIndex = that.options.pageNo, // 当前选择的页码
distance = 0, // ul移动距离
prePage = $('#prePage'), nextPage = $('#nextPage'), firstPage = $('#firstPage'), lastPage = $('#lastPage'), jumpBtn = $('#jumpBtn'), jumpText = $('#jumpText');
prePage.on('click', function() {
pageIndex--;
if (pageIndex < 1)
pageIndex = 1;
handles(pageIndex);
})
nextPage.on('click', function() {
pageIndex++;
if (pageIndex > lis.length)
pageIndex = lis.length;
handles(pageIndex);
})
firstPage.on('click', function() {
pageIndex = 1;
handles(pageIndex);
})
lastPage.on('click', function() {
pageIndex = totalPages;
handles(pageIndex);
})
jumpBtn.on('click', function() {
var jumpNum = parseInt(jumpText.val().replace(/\D/g, ''));
if (jumpNum && jumpNum >= 1 && jumpNum <= totalPages) {
pageIndex = jumpNum;
handles(pageIndex);
jumpText.val(jumpNum);
}
})
lis.on('click', function() {
pageIndex = $(this).index() + 1;
handles(pageIndex);
})
function handles(pageIndex) {
/*
* =========== 在需要分页的页面写对应的js代码 ================
*/
JumpToPage(pageIndex);
/*
* =========== 在需要分页的页面写对应的js代码 ================
*/
lis.removeClass('sel-page').eq(pageIndex - 1).addClass(
'sel-page');
if (totalPages <= 5) {
that.options.callback(pageIndex);
return false;
}
if (pageIndex >= 3 && pageIndex <= totalPages - 2)
distance = (pageIndex - 3) * liWidth;
if (pageIndex == 2 || pageIndex == 1)
distance = 0;
if (pageIndex > totalPages - 2)
distance = (totalPages - 5) * liWidth;
pageSelect
.css('transform', 'translateX(' + (-distance) + 'px)');
pageIndex == 1 ? firstPage.attr('disabled', true) : firstPage
.attr('disabled', false);
pageIndex == 1 ? prePage.attr('disabled', true) : prePage.attr(
'disabled', false);
pageIndex == totalPages ? lastPage.attr('disabled', true)
: lastPage.attr('disabled', false);
pageIndex == totalPages ? nextPage.attr('disabled', true)
: nextPage.attr('disabled', false);
that.options.callback(pageIndex);
}
;
}
}
$.fn.paging = function(options) {
return new Paging($(this), options);
}
})(jQuery, window, document);
三、分页样式 css 源码
新建一个 css 文件,直接复制粘贴就行。记得引入到需要的页面中。
如果对样式不满意,可以自己根据注释修改。
* {
margin: 0;
padding: 0;
list-style: none;
}
.fl {
float: left;
}
.box {
height: 30px;
line-height: 30px;
margin-top: 10px;;
text-align: center;
}
/*设置“首页”“上一页”“下一页”“尾页”“跳转”5个按钮的样式*/
.box button {
padding: 0 10px;
color:#5A98DE;
height: 30px;
float: left;
cursor: pointer;
border: 1px solid #ebebeb;
background-color: #ffffff;
}
.box .first-page,
.box .last-page {
margin: 0;
}
.box .pageWrap { /*把多余的页码给隐藏起来*/
height: 30px;
float: left;
overflow: hidden;
}
.box .pageWrap ul {
width: 100000px; /*设置数字按钮的滚动长度*/
height: 30px;
float: left;
}
/*设置数字按钮的样式*/
.box .pageWrap ul li {
width: 40px; /**/
height: 30px;
border: 1px solid #ebebeb;
line-height: 30px;
box-sizing: border-box;
cursor: pointer;
float: left;
}
/*设置数字按钮被选中时候的按钮背景颜色*/
.box .pageWrap ul .sel-page {
background-color: #5A98DE;
}
/*设置跳转页数的文本框的样式*/
.box .jump-text {
width: 40px;
height: 30px;
box-sizing: border-box;
text-align: center;
float: left;
}
/*设置跳转按钮的样式*/
.box .jump-button {
margin: 0;
float: left;
}
/*设置显示总页数和总条数的样式*/
.box .total-pages,
.box .total-count {
margin-left: 10px;
float: left;
font-size: 14px;
}
三、实现前后台对接
1.在需要用到的页面引入上面的 js 代码和 css 代码。
2.在页面的 html 代码中的对应要显示分页的地方补上这句代码:
<div class="box" id="box"></div>
3.获取数据
后台通过 PageHelper 实现分页后将相关数据(包括需要显示的数据,总的条数,当前的页数等)传给前端,这时候前端就需要接收后台的数据,然后进行前端分页的初始化。
关于 PageHelper 后台分页,不会用的话,可以看下我的另外一篇博客:
我前端选择使用 ajax 来接受数据(不懂的可以学一下,不难的 )。
在需要分页的页面的 js 文件中,编写以下的代码:
function loading(pagenum){
$.ajax({
type:"POST",
url:"/hstc_manage/display_admin",
dataType:"json",
data:{
pagenum:pagenum
},
success:function(data){
/*totalData 总数据 totalPage 总页数*/
/* pagenum == 1 的时候,才需要对分页插件进行初始化 */
if( pagenum == 1){
paging(data.totalData,data.totalPage,pagenum);
}
/*数据渲染*/
/*自定义的函数,可以根据自己的需求来写*/
displayData(data.tAdmin);
},
error:function(){
alert("管理员列表信息获取失败!");
}
});
}
在需要分页的页面的 js 文件中,编写前端分页初始化的代码:
关于参数都已经打了注释,看以下就知道什么意思了。
function paging(totalData,totalPage,pagenum){
$('#box').paging({
initPageNo: pagenum, // 初始页码
totalPages: totalPage, //总页数
totalCount: '合计' + totalData + '条数据', // 条目总数
slideSpeed: 600, // 缓动速度 单位毫秒
jump: true, //是否支持跳转
callback: function(page) {
// 回调函数
}
});
}
前面提到的 JumpToPage(pageIndex) 函数,也需要在需要分页的页面的 js 文件中实现:
function JumpToPage(pagenum){
loading(pagenum);
}
到这里,前端与后台,已对接了哦!
如果你还有什么疑问的话,可以在评论区提问,大家一起学习进步。