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展示，实际应用时定义一个分页容器即可，这里主要是展示案例所以定义了两个容器，如下：

<!--分页容器_1-->
<div class="page_1"></div>
<!--分页容器_2-->
<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);}});
}

我自己制作的小说网站，也使用了该分页功能，感觉不错，值得推荐
也欢迎访问我的小说网站

完整代码如下：
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><!--分页容器_1--><div class="page_1"></div><!--分页容器_2--><div class="page_2"></div><!--先引入jquery--><script src="script/jquery.min.js"></script><!--再引入toPage.js--><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;//当前页,默认为1var 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&&current_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&&current_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

我的GitHub

HTML分页插件功能实现相关推荐

Mybatis中的分页插件
目录一.为什么要使用分页插件? 二.分页常用标签三.分页插件的使用 1.在mybatis的pom中添加分页插件依赖 2.在mybatis-config.xml中创建分页插件 3.在test文件中进 ...
spring boot+mybatis+thymeleaf+pagehelper分页插件实现分页功能
文章目录前言正文业务场景后端 pom.xml application.yml 实体类video.java和User.java----映射VideoMapper.xml----VideoMapp ...
分页插件php,文章内容分页插件
应用信息名称: 文章内容分页插件售价: 128元应用ID: NextPage 最低要求: Z-BlogPHP 1.5.2.1935 (Zero) Build 151935 版本: 6.1 发布 ...
Mybatis分页插件 - 示例
Mybatis极其(最)简(好)单(用)的一个分页插件 http://blog.csdn.net/isea533/article/details/23831273 这里说最好用,绝对不是吹的,不过有好 ...
（血和泪的成果）使用PageHelper分页插件进行后台分页
前些天按照视频里讲的做一个分页功能,可是不知道什么原因在页面就是不显示数据.昨天碰巧发现了一个分页插件,只需一些设置就可以完成分页,非常方便.不过由于是新手,其中遇到了很多很多麻烦,不过幸好得到大神的 ...
java ajax jquery分页插件_分享精心挑选的12款优秀jQuery Ajax分页插件和教程
摘要:这篇jQuery栏目下的"分享精心挑选的12款优秀jQuery Ajax分页插件和教程",介绍的技术点是"jquery_ajax分页插件.jquery_ajax.a ...
MyBatis分页插件PageHelper使用练习
转载自:http://git.oschina.net/free/Mybatis_PageHelper/blob/master/wikis/HowToUse.markdown 1.环境准备: 分页插件p ...
mybatis 分页需要的jar包下载_牛逼哄哄的PageHelper分页插件到底牛在哪里？
你知道的越多,不知道的就越多,业余的像一棵小草! 你来,我们一起精进!你不来,我和你的竞争对手一起精进! 编辑:业余草 urlify.cn/z2IFn2 推荐:https://www.xttblog. ...
AngularJS自定义指令详解（有分页插件代码）
前言除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 通过 .directive() 函数来添加自定义的指令. 调用自定义指令时,需要在HTMl 元素上添加自定义指令名. 自定义指 ...
java mvc 分页查询条件_java分页条件查询-GridManager.js表格插件+Pageable分页对象+mybatis pagehelper分页插件...
总览: 一. GridManager.js表格插件直接上插件API:链接地址感觉该插件简单好用,插件作者也是有问必答,nice 二. 添加依赖后端: pom文件添加: 1.7.0.RELEASE ...

HTML分页插件功能实现

HTML分页插件功能实现相关推荐

最新文章

热门文章