项目中之前需要分页插件，以前用的都是单纯叫做pagenation.js的插件，但是这次集成的时候，项目组一个孩纸用了这个插件，结合网上的例子琢磨了一把。其实大致流程都是相同的，主要将我在用这个分页插件的一些心得分享出来：
1、分页插件引入html中需要：
bootstrap.css
分页插件js
自己写的分页的样式css【如果不用，也可以直接用bootstrap所带的分页css。】
使用jquery可以引入jquery.js
html中：
1 <script type="text/javascript" src="<c:url value="../js/jquery.twbsPagination.js"/>"></script>2 <link rel="stylesheet" href="<c:url value="/content/common/css/bootstrap.min.css"/>" />3 <link rel="stylesheet" href="<c:url value="/content/common/css/pagination.css"/>" />
2、分页插件使用时：
可以定义一个专门页面转换的方法，引入使用：
html中：
1 <ul id="pagination" class="pagination">2 </ul>
js中:
1 managementPage:function (pagesize) { 2 ????var obj = $(‘#managePagination‘).twbsPagination({ 3 ????????totalPages: pagesize,//总页数 4 ????????startPage: 1,//起始页 5 ????????visiblePages: pagesize>5?5:pagesize,//展示页数，超出5页展示5页，未超出时展示总页数 6 ????????initiateStartPageClick: true, 7 ????????hideOnlyOnePage: true,//只有一页时不展示分页 8 ????????onPageClick:function (event,page) {//点击页面事件，回调函数，只能使用ajax异步加载，暂时未发现能够直接在前端操作data的方法。 9 ????????????$(this).addClass("active").siblings().removeClass("active");10 11 ????????????var start = (page - 1)*5+1;12 ????????????var end = page*5+1;13 ????????????var param = {14 ????????????????‘start‘:start,15 ????????????????‘end‘:end16 ????????????};17 ????????????ds.manageSystem(manageSystemUrl,param);//异步加载的方法，主要需要将起始页与结束页带回后台18 ????????}19 ????});20 ????obj.data();//加载分页样式21 },3、注意：分页插件在使用时注意，如果页面中存在其他异步加载的数据，在运行分页方法第一次后，页面上的分页样式与分页中的data数据就是第一次的数据，如果异步加载重新在页面上录入数据，并希望分页继续在新的数据上实现，则需要引用以下代码：
1 //页面重载时置空分页数据（属于分页插件）2 $(‘#managePagination‘).empty();3 $(‘#managePagination‘).removeData("twbs-pagination");4 $(‘#managePagination‘).unbind(‘page‘);这段代码放入的地方也有讲究，需要放在即将异步加载的数据之前，先异步加载的数据一步清空分页插件，此时再次加载的分页数据才是新的数据内容。
4、分页插件基本使用以上代码便可全部满足。
twbsPagination.js分页插件使用心得
原文地址：http://www.cnblogs.com/xinzhijieliang/p/7700392.html