由于项目需要实现分页效果，上jQuery插件库找了下，但是木有找到自己想要的效果，于是自己封装了个分页组件。

思路：

主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页效果。

1.page.init.css

@charset "utf=8";*{ box-sizing: border-box; padding: 0; margin: 0;}.page{ font-size: 13px; text-align: right;}.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: 7px 20px; 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: #00BB9C; color: #FFFFFF; font-weight: bold;}

2.pageInit.js

/** * Created: 2017/6/20. * author: Aaron * address: http:///jquery/2.2.4/jquery.js"></script><script src="js/pageInit.js"></script><script> $.pageInit( { container:'.page',//容器：默认page //setPos:'body',//放置位置：默认body totalPages:10,//总页数：必填 totalLists:100,//数据总数：必填 initPage:1,//初始页码：默认1 inputVal:1,//设置跳转的input值：默认1 //要执行的函数：默认null，必须为fn且返回true则可执行分页，false则不执行 callBack:function(n){ var flag=true; console.log(n); return flag; } } );</script></body></html>

效果：

通过callBack接口，添加自己所需要执行的function函数，并且需要return true时才回执行动态的DOM渲染。

更多精彩内容请点击：jquery分页功能汇总进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。