HTML分页插件功能实现 - 好文

分页功能实现案例展示如下：

1.先引入css样式和jQuery，再引入分页插件toPage.js，谨记顺序不能乱
<link rel="stylesheet" href="css/toPage.css"> <script src="script/jquery.min.js
"></script> <link rel="stylesheet" href="css/toPage.css">
2.定义两个分页容器的div展示，实际应用时定义一个分页容器即可，这里主要是展示案例所以定义了两个容器，如下：
 <div class="page_1"></div>  <div class="page_2"></
div>
3.接着我们使用插件写js代码
 <script> /*容器1参数*/ var obj_1={ obj_box:'.page_1',//翻页容器 total_item:
72//条目总数 /*per_num:10,//每页条目数 current_page:8//当前页*/ }; /*容器2参数*/ var obj_2={
obj_box:'.page_2',//翻页容器 total_item:372,//条目总数 per_num:20,//每页条目数 current_page:8
//当前页 }; /*调用分页方法,初始化数据*/ page_ctrl(obj_1); page_ctrl(obj_2); </script>
4.关于如何修改每页展示的内容：在toPage.js里面有一个change_content()方法，请自行修改即可

以下代码解读：定义了ul，li，分页展示：编号，分页条目；最后要记得吧内容绑定到$(obj_box).children(’.page_content’).html下才能展示出来
function change_content() { /*此处根据项目实际自行编写页面显示内容的方法,举例说明:*/ var page_content=
'<ul style="width: 300px;margin: 10px auto;">';//当前页内容 for(var i=0;i<per_num;i++
){ page_content+='<li>'+((current_page-1)*per_num+i+1)+',分页条目</li>'; }
page_content+='</ul>'; $(obj_box).children('.page_content').html(page_content);
}
另外，也可以也可以写ajax来展示分页数据，如下：
function change_content() { $.ajax({ type: 'get', url: 'http://xxxx', dataType:
"json", data: json_data, error: function (data) { //请求失败时被调用的函数 err_func(data);
}, success: function (data) { //对数据的各种操作operation(data),返回需要展示的页面内容，
//最后绑定到$(obj_box).children('.page_content').html即可展示出来 var page_content=
operation(data); $(obj_box).children('.page_content').html(page_content); } });
}
我自己制作的小说网站，也使用了该分页功能，感觉不错，值得推荐
也欢迎访问我的小说网站 <http://47.94.232.43/novel/index.html>

完整代码如下：
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv
="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="
width=device-width, initial-scale=1"> <title>仿淘宝分页插件</title>  <
link rel="stylesheet" href="css/toPage.css"> </head> <body> <h2 style="
text-align: center">仿淘宝分页插件,完美兼容ie8,简单处理后可兼容更低版本ie</h2>  <div class
="page_1"></div>  <div class="page_2"></div>  <
script src="script/jquery.min.js"></script>  <script src="
script/toPage.js"></script>  <script> /*容器1参数*/ var obj_1={ obj_box:
'.page_1',//翻页容器 total_item:72//条目总数 /*per_num:10,//每页条目数 current_page:8//当前页*/
}; /*容器2参数*/ var obj_2={ obj_box:'.page_2',//翻页容器 total_item:372,//条目总数 per_num:
20,//每页条目数 current_page:8//当前页 }; /*调用分页方法,初始化数据*/ page_ctrl(obj_1); page_ctrl(
obj_2); </script> </body> </html>
css/toPage.css
.page_ctrl{ text-align: center; margin: 10px auto; box-sizing: border-box; }
.page_ctrl *{ line-height: 26px; } .page_ctrl button{ margin:0 3px; min-width:
30px; background: #ffffff; border: 1px solid #e5e5e5; color: #5e5e5e; cursor:
pointer; outline: none; text-align: center; } .page_ctrl button:hover{
background: #0eb0d2; color: #ffffff; } .page_ctrl .btn_dis{ cursor: default;
opacity: .7; background: #eeeeee; color: #5e5e5e; } .page_ctrl .btn_dis:hover{
background: #eeeeee; color: #5e5e5e; } .page_ctrl .current_page{ background:
#0eb0d2; color: #ffffff; } .page_ctrl .input_page_num{ width:30px; height: 26px;
margin:0 3px; padding: 0; text-align: center; background: #ffffff; border: 1px
solid #e5e5e5; color: #5e5e5e; outline: none; } .page_ctrl
.page_total,.page_ctrl .page_text{ color: #2b2b2b; font-size: 13px; }
script/toPage.js
function page_ctrl(data_obj) { var obj_box=(data_obj.obj_box!== undefined)?
data_obj.obj_box:function () { return; };//翻页容器dom对象,必要参数 var total_item=(
data_obj.total_item!== undefined)?parseInt(data_obj.total_item):0;
//数据条目总数,默认为0,组件将不加载 var per_num=(data_obj.per_num!== undefined)?parseInt(
data_obj.per_num):10;//每页显示条数,默认为10条 var current_page=(data_obj.current_page!==
undefined)?parseInt(data_obj.current_page):1;//当前页,默认为1 var total_page=Math.ceil
(total_item/per_num);//计算总页数,不足2页,不加载组件 if(total_page<2){ return; }
//在指定容器内加载分页数据 $(obj_box).append('<div class="page_content"></div>');
//在指定容器内加载分页插件 $(obj_box).append('<div class="page_ctrl"></div>'); function
page_even() { /*加载数据*/ function change_content() {
/*此处根据项目实际自行编写页面显示内容的方法,举例说明:*/ var page_content='<ul style="width:
300px;margin: 10px auto;">';//当前页内容 for(var i=0;i<per_num;i++){ page_content+=
'<li>'+((current_page-1)*per_num+i+1)+',分页条目</li>'; } page_content+='</ul>'; $(
obj_box).children('.page_content').html(page_content); } change_content(); var
inp_val=(current_page==total_page)?1:current_page+1;//跳转页数,input默认显示值 var
append_html='<button class="prev_page">上一页</button>'; for(var i=0;i<total_page-1
;i++){ if(total_page>8&¤t_page>6&&i<current_page-3){ if(i<2){ append_html
+='<button class="page_num">'+(i+1)+'</button>'; } else if(i==2){ append_html+=
'<span class="page_dot">•••</span>'; } } else if(total_page>8&¤t_page<
total_page-3&&i>current_page+1){ if(current_page>6&&i==current_page+2){
append_html+='<span class="page_dot">•••</span>'; }else if(current_page<7){ if(i
<8){ append_html+='<button class="page_num">'+(i+1)+'</button>'; }else if(i==8){
append_html+='<span class="page_dot">•••</span>'; } } //append_html+='<span
class="page_dot">•••</span>'; } else{ if(i==current_page-1){ append_html+=
'<button class="page_num current_page">'+(i+1)+'</button>'; } else{ append_html
+='<button class="page_num">'+(i+1)+'</button>'; } } } if(current_page==
total_page){ append_html+='<button class="page_num current_page">'+(i+1)+
'</button>'; }else{ append_html+='<button class="page_num">'+(i+1)+'</button>';
} append_html+='<button class="next_page">下一页</button><span
class="page_total">共 '+total_page+' 页, 到第</span><input class="input_page_num"
type="text" value="'+inp_val+'"><span class="page_text">页</span><button
class="to_page_num">确定</button>'; $(obj_box).children('.page_ctrl').append(
append_html); if(current_page==1){ $(obj_box+' .page_ctrl .prev_page').attr(
'disabled','disabled').addClass('btn_dis'); }else{ $(obj_box+' .page_ctrl
.prev_page').removeAttr('disabled').removeClass('btn_dis'); } if(current_page==
total_page){ $(obj_box+' .page_ctrl .next_page').attr('disabled','disabled').
addClass('btn_dis'); }else{ $(obj_box+' .page_ctrl .next_page').removeAttr(
'disabled').removeClass('btn_dis'); } } page_even(); $(obj_box+' .page_ctrl').on
('click','button',function () { var that=$(this); if(that.hasClass('prev_page'))
{ if(current_page!=1){ current_page--; that.parent('.page_ctrl').html('');
page_even(); } } else if(that.hasClass('next_page')){ if(current_page!=
total_page){ current_page++; that.parent('.page_ctrl').html(''); page_even(); }
} else if(that.hasClass('page_num')&&!that.hasClass('current_page')){
current_page=parseInt(that.html()); that.parent('.page_ctrl').html('');
page_even(); } else if(that.hasClass('to_page_num')){ current_page=parseInt(that
.siblings('.input_page_num').val()); that.parent('.page_ctrl').html('');
page_even(); } }); }
代码放在GitHub上，LoyalWilliams/front-end
<https://github.com/LoyalWilliams/front-end/tree/master/%E4%BB%BF%E6%B7%98%E5%AE%9D%E5%88%86%E9%A1%B5%E6%8F%92%E4%BB%B6>

我的GitHub <https://github.com/LoyalWilliams>
QQ：2541692705
邮箱：loyalwilliams@163.com
微信扫一扫关注我，没事可以玩玩小游戏

我想去流浪，我想去读书，若有机会，江湖再见
扫一扫，领取红包，就当奖励你我付出的努力

热门工具换一换