NodeJS和BootStrap分页效果的实现代码


Posted in NodeJs onNovember 07, 2016

1、数据处理

首先在动态js中,根据url参数获取数据库文档的数量,设置分页的大小,获取当前页面的数据,然后将文档数量pagecount,分页大小pagesize,以及当前页面currentpage传递到页面中。

2、处理分页效果

我采用的是JavaScript动态生成的,你也可以利用ejs支持函数的特性将其封装后生成html形式的分页。

首先,添加分页ul,在你的页面中需要显示的位置添加代码:

<ul class="pagination" id="pagination">
</ul>

然后在script标签中插入处理分页的代码:

$(document).ready(function() {
if($("#pagination")){
var pagecount = <%= locals.pagecount %>;
var pagesize = <%= locals.pagesize %>;
var currentpage = <%= locals.currentpage %>;
var counts,pagehtml="";
if(pagecount%pagesize==0){
counts = parseInt(pagecount/pagesize);
}else{
counts = parseInt(pagecount/pagesize)+1;
}
//只有一页内容
if(pagecount<=pagesize){pagehtml="";}
//大于一页内容
if(pagecount>pagesize){
if(currentpage>1){
pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(currentpage-1)+'">上一页</a></li>';
}
for(var i=0;i<counts;i++){
if(i>=(currentpage-3) && i<(currentpage+3)){
if(i==currentpage-1){
pagehtml+= '<li class="active"><a rel="external nofollow" href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>';
}else{
pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>';
}

}
}
if(currentpage<counts){
pagehtml+= '<li><a rel="external nofollow" href="/course/index/'+(currentpage+1)+'">下一页</a></li>';
}
}
$("#pagination").html(pagehtml);
}
});

注意:locals.pagecount,locals.pagesize,locals.currentpage分别是数据库数量,分页大小,当前分页,他们是从js中传递过来的,当然,你也可以直接修改它们为固定的数据测试下效果。

比如:

NodeJS和BootStrap分页效果的实现代码

实际效果为:

NodeJS和BootStrap分页效果的实现代码

这样一个简单的分页效果就出来了

以上所述是小编给大家介绍的NodeJS和BootStrap分页效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

NodeJs 相关文章推荐
nodejs的require模块(文件模块/核心模块)及路径介绍
Jan 14 NodeJs
NodeJS的Promise的用法解析
May 05 NodeJs
NodeJS仿WebApi路由示例
Feb 28 NodeJs
用nodejs实现json和jsonp服务的方法
Aug 25 NodeJs
nodeJS微信分享
Dec 20 NodeJs
Nodejs中crypto模块的安全知识讲解
Jan 03 NodeJs
Nodejs实现爬虫抓取数据实例解析
Jul 05 NodeJs
NodeJS加密解密及node-rsa加密解密用法详解
Oct 12 NodeJs
nodejs微信开发之自动回复的实现
Mar 17 NodeJs
使用nodejs实现JSON文件自动转Excel的工具(推荐)
Jun 24 NodeJs
详解nodejs内置模块
May 06 NodeJs
详解NodeJS模块化
Jun 15 NodeJs
NodeJS使用formidable实现文件上传
Oct 27 #NodeJs
nodejs简单实现操作arduino
Sep 25 #NodeJs
NodeJs读取JSON文件格式化时的注意事项
Sep 25 #NodeJs
nodejs微信公众号支付开发
Sep 19 #NodeJs
nodeJs内存泄漏问题详解
Sep 05 #NodeJs
浅谈Nodejs应用主文件index.js
Aug 28 #NodeJs
NodeJS远程代码执行
Aug 28 #NodeJs
You might like
用PHP制作静态网站的模板框架(二)
2006/10/09 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
php阿拉伯数字转中文人民币大写
2015/12/21 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
Yii 2.0在Grid中格式化时间方法示例
2017/06/06 PHP
常见的5个PHP编码小陋习以及优化实例讲解
2021/02/27 PHP
javascript 语法基础 想学习js的朋友可以看看
2009/12/16 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
node.js+express制作网页计算器
2016/01/17 Javascript
javascript中call apply 与 bind方法详解
2016/03/10 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
JCrop+ajaxUpload 图像切割上传的实例代码
2016/07/20 Javascript
从零学习node.js之利用express搭建简易论坛(七)
2017/02/25 Javascript
HTML5实现微信拍摄上传照片功能
2017/04/21 Javascript
Javascript继承机制详解
2017/05/30 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
[48:22]VGJ.S vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python检测远程udp端口是否打开的方法
2015/03/14 Python
Python的设计模式编程入门指南
2015/04/02 Python
pandas object格式转float64格式的方法
2018/04/10 Python
对python中的iter()函数与next()函数详解
2018/10/18 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python3标准库之functools管理函数的工具详解
2020/02/27 Python
服装设计专业毕业生求职信
2014/04/09 职场文书
竞选班委演讲稿
2014/04/28 职场文书
信息工作经验交流材料
2014/05/28 职场文书
财政专业大学生职业生涯规划书
2014/09/17 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
幼儿园元旦主持词
2015/07/06 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
《杜鹃的婚约》OP主题曲「凸凹」无字幕影像公开
2022/04/08 日漫