Jquery 分页插件， 带你一步一步接入后台数据

目录

 

一、效果图

二、分页 js 源码讲解

三、分页样式 css 源码

三、实现前后台对接

---

一、效果图

二、分页 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">共&nbsp;'
					+ that.options.totalPages
					+ '&nbsp;页</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 后台分页，不会用的话，可以看下我的另外一篇博客：

Java 分页插件 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);
}

到这里，前端与后台，已对接了哦！

如果你还有什么疑问的话，可以在评论区提问，大家一起学习进步。