基于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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
判定是否原生方法的JS代码
Nov 12 Javascript
javascript实现简单的二级联动
Mar 19 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
微信小程序的分类页面制作
Jun 27 Javascript
ejsExcel模板在Vue.js项目中的实际运用
Jan 27 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
如何在wxml中直接写js代码(wxs)
Nov 14 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
一个典型的PHP分页实例代码分享
2011/07/28 PHP
php操作mysqli(示例代码)
2013/10/28 PHP
PHP中session变量的销毁
2014/02/27 PHP
thinkphp框架实现数据添加和显示功能
2016/06/29 PHP
通过javascript的匿名函数来分析几段简单有趣的代码
2010/06/29 Javascript
让浏览器非阻塞加载javascript的几种方法小结
2011/04/25 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
关于Javascript作用域链的八点总结
2013/12/06 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
jQuery制作可自定义大小的拼图游戏
2015/03/30 Javascript
js控制TR的显示隐藏
2016/03/04 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
2016/06/02 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
微信公众号服务器验证Token步骤图解
2019/12/30 Javascript
JavaScript中CreateTextFile函数
2020/08/30 Javascript
python监控网站运行异常并发送邮件的方法
2015/03/13 Python
对于Python中RawString的理解介绍
2016/07/07 Python
Python基于回溯法子集树模板解决选排问题示例
2017/09/07 Python
Python实现调度算法代码详解
2017/12/01 Python
对Python中DataFrame按照行遍历的方法
2018/04/08 Python
关于Python 的简单栅格图像边界提取方法
2019/07/05 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
HTML5 WebGL 实现民航客机飞行监控系统
2019/07/25 HTML / CSS
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
了解AppleShare protocol(AppleShare协议)吗
2015/08/28 面试题
寄语十八大感言
2014/02/07 职场文书
土木工程求职信
2014/05/29 职场文书
司机岗位职责说明书
2014/07/29 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
校园广播稿100字
2014/10/06 职场文书
亮剑观后感500字
2015/06/05 职场文书
看雷锋电影观后感
2015/06/10 职场文书
2016教师廉洁从教心得体会
2016/01/13 职场文书
党员公开承诺书2016
2016/03/24 职场文书
Javascript中的解构赋值语法详解
2021/04/02 Javascript