自定义分页插件-ajax数据分页,html跳转分页

老规矩,先上图

未标题-2.jpg

使用说明

1,css代码 (我用的是LESS写的CSS,如果你不用,稍着修改-1,大括号对应,2,去掉@***的内容改为CSS代码)

/*分页效果 star
--------------------------------------------------------------------------------------------------------------------------*/
.paging{ margin:16px auto; text-align:center;
.paggingTotal{display:inline-block;line-height:100%; padding:15px 16px; vertical-align:top; color:#b0b5b9;}
.pagingInner{line-height:40px; overflow:hidden;clear:left; display:inline-block; border-radius:5px; background:@border; overflow:hidden;
a,span{border-right:#e4e4e4 solid 1px; background:none; line-height:40px; padding:9px 16px;margin:0; color:@white; text-decoration:none; .pointer;}
a:hover{}
span.current{cursor:text;}
span.active{background:@green; }
span:first-child{padding-right:5px; }
}
}
/*分页效果 end


2,html代码(这里代码很简单,因为只一个容器)


   


3,自定义JS代码


/** 分页点击 +---------------------------------
*
* @author lovebslq 2014-10-30 +---------------------------------
* @param int
* pageNumber 当前要加的页码,默认为第1页
* @param int
* showCont 每页显示多少条
* @return void +---------------------------------
*/

frame.pagingClick = function(peculiarFun,rows) {
var rows= arguments[1] ? arguments[1] : 10;
$('#paging a').click(function() {
var thisid = $(this).attr('linkId');
if(typeof peculiarFun=='function'){
peculiarFun(thisid, rows);
}
});
};
/**
* 分页效果; +---------------------------------
*
* @author lovebslq 2014-10-30 +---------------------------------
* @param string pagingDom 分页数据要载入的DOM +---------------------------------
* @param string total 总条数 默认为0 +---------------------------------
* @param string view 每页显示多少条 默认为10 +---------------------------------
* @param int pagenow 当前要加的页码,默认为第1页
* @param int clickFun 分页的点击效果
* @return void +---------------------------------
*/
frame.paging = function(total,pagingDom,view,pagenow,clickFun) {
var total= arguments[0] ? arguments[0] : 0;
var paging = arguments[1] ? arguments[1] : 'paging';
var view = arguments[2] ? arguments[2] : 10;
var pagenow = arguments[3] ? arguments[3] : 1;
var clickFun = arguments[4] ? arguments[4] : '';
if (total <= view) {
// 如果查出的总条数小于小前页面显示的条数就不显示分页
if($('#paging span').size()>1){
// $('#paging').empty();
}
return;
}
// 总共的页数
var pageN = Math.ceil(total / view);
// 当面最先显示的页
if((pagenow %5)>0){
var pageFirst = parseInt(pagenow / 5) * 5 + 1;
}else{
var pageFirst = parseInt(pagenow / 5) * 5 -4;
}
// 页码字符串
var pagstr = '';
// 上一页;
var prevpage = parseInt(pagenow) - 1;
if (prevpage <= 1) {
prevpage = 1;
}
// 下一页;
var nextpage = parseInt(pagenow) + 1;
if (nextpage >= pageN) {
nextpage = pageN;
}
if (pagenow > 1) {
pagstr += '<上一页';
}else{
pagstr += '<上一页 for="" var="" i="" if="" pagen="" pagefirst="" pagenow="" pagstr="" else="">';
}else{
pagstr += '下一页>';
}
// 分页;
var pagsHtml = '共' + total
+ '条记录
' + pagstr+'
';
$('#'+paging).html(pagsHtml);
// 重新绑定分页效果;
frame.pagingClick(clickFun, view);
};

4,调用JS(回调函数 backfun需自定义,不需要时就不写)

frame.paging(100,'',60,1,'backfun');

特别说明

该插件的回调函数是用于ajax调用数据是,点击的时候来重新刷新数据与生成分页插件的,所以需要自定义,如果是采用的页面跳转,即不使用ajax,便不需要回调函数,可直接去掉


版权及转载说明

本站原创、转载文章欢迎任何形式的转载,但请务必注明出处,尊重他人劳动共创开源社区

本站转载文章版权归原作者所有,如发现本站文章涉嫌侵权请点击「联系我们」反馈,本站将立即给予删除

转载请注明:文章转载自:全分享社区 「http://www.aweb.cc

本文标题:自定义分页插件-ajax数据分页,html跳转分页

本文地址:http://www.aweb.cc/article/detail/id/515.html

AngularJS 参考手册 <<上一篇 下一篇>>JavaScript学习总结(一)基础部