项目中之前需要分页插件,以前用的都是单纯叫做pagenation.js的插件,但是这次集成的时候,项目组一个孩纸用了这个插件,结合网上的例子琢磨了一把。其实大致流程都是相同的,主要将我在用这个分页插件的一些心得分享出来:
1、分页插件引入html中需要:
bootstrap.css
分页插件js
自己写的分页的样式css【如果不用,也可以直接用bootstrap所带的分页css。】
使用jquery可以引入jquery.js
html中:
1 "> 2 " /> 3 " />
2、分页插件使用时:
功能介绍: 一.系统管理:管理员管理,可以新增管理员及修改管理员密码;数据库备份,为保证您的数据安全本系统采用了数据库备份功能;上传文件管理,管理你增加产品时上传的图片及其他文件 二.企业信息:可设置修改企业的各类信息及介绍 三.产品管理:产品类别新增修改管理,产品添加修改以及产品的审核 四.下载中心:可分类增加各种文件,如驱动和技术文档等文件的下载 五.订单管理:查看订单的详细信息
可以定义一个专门页面转换的方法,引入使用:
html中:
1
-
2
js中:
managementPage:function (pagesize) {
var obj = $('#managePagination').twbsPagination({
totalPages: pagesize,//总页数
startPage: 1,//起始页
visiblePages: pagesize>5?5:pagesize,//展示页数,超出5页展示5页,未超出时展示总页数
initiateStartPageClick: true,
hideOnlyOnePage: true,//只有一页时不展示分页
onPageClick:function (event,page) {//点击页面事件,回调函数,只能使用ajax异步加载,暂时未发现能够直接在前端操作data的方法。
$(this).addClass("active").siblings().removeClass("active");
var start = (page - 1)*5+1;
var end = page*5+1;
var param = {
'start':start,
'end':end
};
ds.manageSystem(manageSystemUrl,param);//异步加载的方法,主要需要将起始页与结束页带回后台
}
});
obj.data();//加载分页样式
},3、注意:分页插件在使用时注意,如果页面中存在其他异步加载的数据,在运行分页方法第一次后,页面上的分页样式与分页中的data数据就是第一次的数据,如果异步加载重新在页面上录入数据,并希望分页继续在新的数据上实现,则需要引用以下代码:
1 //页面重载时置空分页数据(属于分页插件)
2 $('#managePagination').empty();
3 $('#managePagination').removeData("twbs-pagination");
4 $('#managePagination').unbind('page');这段代码放入的地方也有讲究,需要放在即将异步加载的数据之前,先异步加载的数据一步清空分页插件,此时再次加载的分页数据才是新的数据内容。
4、分页插件基本使用以上代码便可全部满足。









