基于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示例收集
Nov 05 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
jQuery中trigger()方法用法实例
Jan 19 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
在一个页面实现两个zTree联动的方法
Dec 20 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
对angularJs中$sce服务安全显示html文本的实例
Sep 30 Javascript
你不知道的SpringBoot与Vue部署解决方案
Nov 09 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抓屏函数实现屏幕快照代码分享
2014/01/02 PHP
PHP之预定义接口详解
2015/07/29 PHP
JavaScript 的方法重载效果
2009/08/07 Javascript
jquery 表单进行客户端验证demo
2009/08/24 Javascript
关于JavaScript中原型继承中的一点思考
2012/07/25 Javascript
JavaScript+html5 canvas绘制缤纷多彩的三角形效果完整实例
2016/01/26 Javascript
详解JavaScript的闭包、IIFE、apply、函数与对象
2016/12/21 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
2017/06/17 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
vue实现密码显示隐藏切换功能
2018/02/23 Javascript
vue中添加mp3音频文件的方法
2018/03/02 Javascript
js 图片转base64的方式(两种)
2018/04/24 Javascript
webpack4.x开发环境配置详解
2018/08/04 Javascript
微信小程序新手教程之页面打开数量限制
2019/03/03 Javascript
JS插入排序简单理解与实现方法分析
2019/11/25 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
2020/06/19 Javascript
如何区分vue中的v-show 与 v-if
2020/09/08 Javascript
vue-cli3 热更新配置操作
2020/09/18 Javascript
微信小程序实现底部弹出模态框
2020/11/18 Javascript
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python设计模式之迭代器模式原理与用法实例分析
2019/01/10 Python
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
文员个人求职自荐信
2013/09/21 职场文书
生产部主管岗位职责
2014/01/06 职场文书
商业房地产广告语
2014/03/13 职场文书
安全生产宣传标语
2014/06/06 职场文书
垃圾分类的活动方案
2014/08/15 职场文书
四风问题对照检查材料
2014/09/22 职场文书
工作表扬信
2015/01/17 职场文书
学校国庆节活动总结
2015/03/23 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
windows11怎么查看wifi密码? win11查看wifi密码的技巧
2021/11/21 数码科技