通用分页前端框架

给大家分享一个自己设计的分页框架，废话不多说，进入主题，分页依赖于bootstrap-paginator.JS  http://bootstrappaginator.org/ ，先给大家上效果图和代码然后具体说明，  
//fenye.JS
 define([ "bootstrap-paginator" ], function() {

function fenye(dangqian, totalCount, fangfa) {

var count = totalCount;

var pageCount = totalCount == 0 ? 1 : Math.ceil(totalCount/pageSize); //通过传过来的总数计算出页数

var options = {

bootstrapMajorVersion : 3,//这是版本3，每个版本的方法有些不同

currentPage : dangqian,// 当前的页数

totalPages : pageCount,// 一共有多少页

numberOfPages : pageSize, // 要显示的数目，可以加个参数进来，这个随意

itemTexts : function(type, page, current) {

switch (type) {

case "first":

return "<<"; //这些是改变显示出来的提示，随意

case "prev":

return "< 上一页";

case "next":

return "下一页 >";

case "last":

return ">>";

case "page":

return page;

}

},

itemContainerClass : function(type, page, current) {

return (page === current) ? "active" : "pointer-cursor"; //这是给鼠标挪上去的一个手的样式。

},

onPageClicked : function(e, originalEvent, type, page) {

fangfa(page);

console.log("当前去" + page + "页"); // 此次可以写自己的方法 page

// 是当前你点击的页数，你可以AJAX

}

};

$('#pager1').text("共有" + count + "条数据"); 可以多加一个div 记录总条数

$('#pager').bootstrapPaginator(options);   把上面类似节点的东西都加载到这个id为pager的ul里 。

}

return {

init : fenye // 返回这个方法，模块化。

};

});

require 日志中有 不会的可以去看看， 先去官网下载bootstrap-paginator.JS 然后在自己的JS写好依赖，引用：

$(document).ready(function() {

var count = $("#hiddenLi").text();

require([ "fenye", "admin/account/list" ], function(fenye, list) {

list.getListBean(1);

fenye.init(1, count, list.getListBean);

});

});  先规定一个隐藏域 用来接收从后台传过来的总条数，然后require调用fenye.js ，list是我AJAX向后台去值 然后动态创建行，列的JS，分页js需要用到三个参数，第一个是你想去第几页，默认是第一页，第二个参数是后台查询总数，分页里已经算好了，通过给的总个数算出分多少页，第三个数是你往后台交互的方法名称（ 注意只是方法名就够了），你所需要做的是 在你的页面 写一个ul                     <ul id="pager"></ul>  就可以了，使用原理见上面的代码 有注释，官网上也有详细的说明。由于信息的机密，发一个简单的效果图
 
 用google调试看下解析后的样式