分享学习心得,记录学习笔记
文章:38   访问:110368
今天是:
2019年10月19日 星期六
  >   文章列表   >   文章详情
/*使用方法*/
// createPaginate({
// // 分页框名称
// elename : "#page",
// // 最后一页
// lastpage : 10,
// // 页码按钮数量
// column_num : 5,
// success:function(currPage){
//
// }
// });


function createPaginate(conf,currPage = 1){
// 分页框名称
var page_frame_name = conf.elename;

// 最后一页
var last_page = conf.lastpage;

// 页码按钮数量
var column_num = conf.column_num;

// 当前页码
var curr_page = currPage;
// 分页框架
var page_frame = $(page_frame_name);
// 页码最大增减量
var max_fix = (column_num-1)/2;
// 当前增减量
var fix_item = 0-max_fix;


page_frame.addClass('fp-paginate');
page_frame.append("<span >"+curr_page+"/"+last_page+"</span>");
page_frame.append("<a href='javascript:void(0)'>首页</a>");
if (curr_page - 1 > 0) {
page_frame.append("<a href='javascript:void(0)'>上一页</a>");
}
for (var i=0;i<column_num;i++)
{
if (fix_item < 0 && curr_page + fix_item > 0) {
page_frame.append("<a href='javascript:void(0)'>"+(curr_page+fix_item)+"</a>");
}
if (0===fix_item) {
page_frame.append("<a href='javascript:void(0)' id='fp-currpage'>"+curr_page+"</a>");
}
if (fix_item > 0 && curr_page + fix_item <= last_page) {
page_frame.append("<a href='javascript:void(0)'>"+(curr_page+fix_item)+"</a>");
}
fix_item++;
}
if (curr_page+1 <= last_page) {
page_frame.append("<a href='javascript:void(0)'>下一页</a>");
}
page_frame.append("<a href='javascript:void(0)'>尾页</a>");

page_frame.append("<i ></i><input type='text' id='fp-inp-goto' placeholder='go' value='1'><button id='fp-btn-go' >跳转</button>");

// 按钮监听
$(page_frame_name).find("a").click(function(){
var page_a = $(this);
var btn_name = page_a.data('name');
switch (btn_name){
case 'page-number': curr_page = Number(page_a.html()); break;
case 'page-first': curr_page = 1; break;
case 'page-pre': curr_page = curr_page-1; break;
case 'page-next': curr_page = curr_page+1; break;
case 'page-last': curr_page = last_page; break;
}
conf.success(curr_page);
page_frame.html('');
createPaginate(conf,curr_page);
});
$(page_frame_name).find("#fp-btn-go").click(function() {
curr_page = Number($("#fp-inp-goto").val());
conf.success(curr_page);
page_frame.html('');
createPaginate(conf,curr_page);
});

}



/*翻页*/
.fp-paginate{width: 100%;height: 40px;font-size: 14px;color: #404040;}
.fp-span{margin-right: 5px;}
.fp-a{text-decoration: none;color:#404040;padding: 0 5px;border: 1px solid white;}
.fp-a:hover{color:black;border: 1px solid gray;}
.fp-currpage{background-color:#404040;color:white;}
.fp-inp-goto{width: 40px;border-radius: 3px;border: 1px solid gray;padding-left: 10px;outline: none;}
.fp-btn-go{background-color: white;border: 1px solid gray;border-radius: 3px;margin-left: 5px;}
.fp-btn-go:hover{background-color: #eee;border-radius: 3px;cursor: pointer;}




友情链接 doywb

2018 Copyright© 米灵尔 小熊 豫ICP备15007436号-1

豫公网安备 41152302000146号