基于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 相关文章推荐
jquery实现pager控件示例
Apr 09 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
js如何打印object对象
Oct 16 Javascript
AngularJS 最常用的功能汇总
Feb 17 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
Sep 21 Javascript
分分钟玩转Vue.js组件(二)
Mar 01 Javascript
详解用vue.js和laravel实现微信授权登陆
Jun 23 Javascript
vue实现移动端图片裁剪上传功能
Aug 18 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
vue3.0 的 Composition API 的使用示例
Oct 26 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 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实现ping
2006/10/09 PHP
PHP base64编码后解码乱码的解决办法
2014/06/19 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
Javascript 继承实现例子
2009/08/12 Javascript
写给想学习Javascript的朋友一点学习经验小结
2010/11/23 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
js 自动播放的实例代码
2013/11/19 Javascript
页面加载完成后再执行JS的jquery写法以及区别说明
2014/02/22 Javascript
jquery库或JS文件在eclipse下报错问题解决方法
2014/04/17 Javascript
js实现图片漂浮效果的方法
2015/03/02 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
贴近用户体验的Jquery日期、时间选择插件
2015/08/19 Javascript
探究JavaScript函数式编程的乐趣
2015/12/14 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
Bootstrap基本布局实现方法详解
2016/11/25 Javascript
bootstrap表单示例代码分享
2017/05/18 Javascript
CentOS 安装NodeJS V8.0.0的方法
2017/06/15 NodeJs
js仿微信抢红包功能
2020/09/25 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
2019/05/30 NodeJs
在vue项目中封装echarts的步骤
2020/12/25 Vue.js
python获取豆瓣电影简介代码分享
2014/01/16 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
基于MTCNN/TensorFlow实现人脸检测
2018/05/24 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
Selenium 滚动页面至元素可见的方法
2020/03/18 Python
英国舒适型鞋履品牌:FitFlop
2017/05/17 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
最新茶叶店创业计划书
2014/01/14 职场文书
人资专员岗位职责
2014/04/04 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
试用期解除劳动合同通知书
2015/04/16 职场文书
聋哑人盗窃罪辩护词
2015/05/21 职场文书
2015初中团委工作总结
2015/07/28 职场文书