基于Bootstrap和jQuery构建前端分页工具实例代码


Posted in Javascript onNovember 23, 2016

前言

为啥名字叫【前端分页工具】?因为我实在想不到什么好名字,如果想要更加贴切的理解这个工具,应该从业务来看

业务是这样的,有一个数据从后台传到前台,因为数据量不大,因此传过来之后直接显示即可,但是=。=所谓的数据量不大,最多也达到成百上千条,不可能全部显示出来,那么就需要分页

常规的分页是利用Ajax,通过传页偏移量到后台,后台查询数据库再返回数据,可以实现无刷新分页,拿到的数据也是最新的

前端分页

优点:一次传输数据,避免用户反复请求服务器,减少网络带宽、服务器调度压力、数据库查询、缓存查询压力

缺点:有新数据无法实时更新,除非用户重新请求数据

过程

刚开始我不希望造轮子,想尽快完成,于是找了很久Bootstrap的工具,找到了一个BootstrapTable,这个插件很强大,除了可以使用常规的方式分页,还可以指定数据(json),进行前端分页

但是,这个是表格分页,也就是说,如果不是表格那就没用了,刚好…我的业务就不是表格..那么只能看插件源码修改了,改的面目全非后,上个厕所回来,想到了更好的办法,于是删除…

解决办法:先思考分页是为了什么?呈现想看的页面,隐藏不想看的。没错,可以利用CSS的display属性

版本

Bootstrap-3.3.0

jQuery-1.11.3

代码

JavaScript

<script type="text/javascript">
//上一页
function previous(){
//当前页-1
new_page = parseInt($('#current_page').val()) - 1;
go_to_page(new_page);
}
//下一页
function next(){
//当前页+1
new_page = parseInt($('#current_page').val()) + 1;
go_to_page(new_page);
}
//跳转某一页
function go_to_page(page_num){
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
//获取隐藏域中页数大小(每页多少条数据)
var show_per_page = parseInt($('#show_per_page').val());
//得到元素从哪里开始的片数(点击页 * 页大小)如点击第5页,5条/页。则开始为25
start_from = page_num * show_per_page;
//得到结束片的元素数量,如果开始为25,5条/页,则结束为30
end_on = start_from + show_per_page;
//隐藏所有子div元素的内容,显示具体片数据,如显示25~30
$('#datas').children().css('display', 'none').slice(start_from, end_on).css('display', 'inline-block');
//每页显示的数目
var show_per_page = 10;
//获取总数据的数量
var number_of_items = $('#topics').children().size();
//计算页数
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//在页数区域内则做页偏移
if( (page_num >= 2) && (page_num <= (number_of_pages - 3)) ){
//生成分页->上一页
var page_info = '<li><a class="previous_link" href="javascript:previous();">«</a></li>';
var p = page_num;
var i = page_num - 2;
var j = page_num + 2;
//生成分页->前2页
while(page_num > i){
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + i +')" longdesc="' + i +'">'+ (i + 1) +'</a></li>';
i++;
}
//生成分页->当前页
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + page_num +')" longdesc="' + page_num +'">'+ (page_num + 1) +'</a></li>';
//生成分页->后2页
while(p < j){
if(p == number_of_pages){
break;
}
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + (p + 1) +')" longdesc="' + (p + 1) +'">'+ (p + 2) +'</a></li>';
p++;
}
//生成分页->下一页
page_info += '<li><a class="next_link" href="javascript:next();">»</a></li>';
//加载分页
$('.pagination').html(page_info);
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
}
else{ //否则不偏移
//激活某一页,使得显示某一页
$('.page_link[longdesc=' + page_num +']').parent().addClass('active').siblings('.active').removeClass('active');
}
//更新隐藏域中当前页
$('#current_page').val(page_num);
}
$(function(){
//每页显示的数目
var show_per_page = 10;
//获取话题数据的数量
var number_of_items = $('#datas').children().size();
//计算页数
var number_of_pages = Math.ceil(number_of_items/show_per_page);
//设置隐藏域默认值
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);
//生成分页->上一页
var page_info = '<li><a class="previous_link" href="javascript:previous();">«</a></li>';
var current_link = 0;
//生成分页->页数
while(number_of_pages > current_link){
if(current_link == 5){
break;
}
page_info += '<li><a class="page_link" href="javascript:go_to_page(' + current_link +')" longdesc="' + current_link +'">'+ (current_link + 1) +'</a></li>';
current_link++;
}
//生成分页->下一页
page_info += '<li><a class="next_link" href="javascript:next();">»</a></li>';
//加载分页
$('.pagination').html(page_info);
//生成分页->左侧总数
$("#data-total-page").html(show_per_page+"条/页,共"+number_of_pages+"页")
//激活第一页,使得显示第一页
$('#data-pagination li').eq(1).addClass('active');
//隐藏该对象下面的所有子元素
$('#datas').children().css('display', 'none');
//显示第n(show_per_page)元素
$('#datas').children().slice(0, show_per_page).css('display', 'inline-block');
});
</script>

HTML

<!-- 数据 -->
<div id="datas">
<?php
foreach($data as $v)
{
echo '<div class="data">
<div class="data-info">
<div class="data-name">' + $v['name'] + '</div>
<div class="data-blog">' + $v['blog'] + '</div>
</div>
</div>
';
}
?>
</div>
<!-- 分页 -->
<input type="hidden" id="current_page" value="0">
<input type="hidden" id="show_per_page" value="0">
<div id="data-page-info">
<div id="data-total-page"></div>
<div id="data-pagination">
<ul class="pagination"></ul>
</div>
</div>

效果如下

基于Bootstrap和jQuery构建前端分页工具实例代码

动态切换

基于Bootstrap和jQuery构建前端分页工具实例代码

以上所述是小编给大家介绍的基于Bootstrap和jQuery构建前端分页工具实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
php图像生成函数之间的区别分析
Dec 06 Javascript
基于javascript实现页面加载loading效果
Sep 15 Javascript
常用原生JS兼容性写法汇总
Apr 27 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
js replace()去除代码中空格的实例
Feb 14 Javascript
JS常见算法详解
Feb 28 Javascript
javascript实现的图片预览功能
Mar 25 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 jQuery
详解vue-cli 2.0配置文件(小结)
Jan 14 Javascript
微信小程序 多行文本显示...+显示更多按钮和收起更多按钮功能
Sep 26 Javascript
Webpack中SplitChunksPlugin 配置参数详解
Mar 24 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
Nov 23 #Javascript
值得分享的Bootstrap Table使用教程
Nov 23 #Javascript
JavaScript面试题(指针、帽子和女朋友)
Nov 23 #Javascript
jQuery 出现Cannot read property ‘msie’ of undefined错误的解决方法
Nov 23 #Javascript
移动开发之自适应手机屏幕宽度
Nov 23 #Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 #Javascript
jQuery-mobile事件监听与用法详解
Nov 23 #Javascript
You might like
短波的认识
2021/03/01 无线电
php中$_REQUEST、$_POST、$_GET的区别和联系小结
2011/11/23 PHP
php中异常处理方法小结
2015/01/09 PHP
php实现异步将远程链接上内容(图片或内容)写到本地的方法
2016/11/30 PHP
Prototype 工具函数 学习
2009/07/23 Javascript
JQuery jsonp 使用示例代码
2009/08/12 Javascript
javascript URL编码和解码使用说明
2010/04/12 Javascript
jquery删除指定的html标签并保留标签内文本内容的方法
2014/04/02 Javascript
php常见的页面跳转方法汇总
2015/04/15 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
2015/12/15 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
2017/02/28 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
解决vue打包项目后刷新404的问题
2018/03/06 Javascript
Vue中v-show添加表达式的问题(判断是否显示)
2018/03/26 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
2018/05/13 Javascript
微信小程序实现发送验证码按钮效果
2018/12/20 Javascript
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
python encode和decode的妙用
2009/09/02 Python
Python实现把utf-8格式的文件转换成gbk格式的文件
2015/01/22 Python
python 打印对象的所有属性值的方法
2016/09/11 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python Learning 列表的更多操作及示例代码
2018/08/22 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python+selenium实现自动化百度搜索关键词
2019/06/03 Python
Python 日期时间datetime 加一天,减一天,加减一小时一分钟,加减一年
2020/04/16 Python
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
应届大专毕业生个人自荐信
2013/09/22 职场文书
董事长职责范文
2013/11/08 职场文书
售后服务承诺书模板
2014/05/21 职场文书
打架赔偿协议书范本
2014/10/26 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
如何撰写促销方案?
2019/07/05 职场文书
小学生一年级(书信作文)
2019/08/13 职场文书