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极简入门教程(二):定时器
Oct 25 NodeJs
轻松创建nodejs服务器(7):阻塞操作的实现
Dec 18 NodeJs
NodeJS与HTML5相结合实现拖拽多个文件上传到服务器的实现方法
Jul 26 NodeJs
使用nodejs中httpProxy代理时候出现404异常的解决方法
Aug 15 NodeJs
初识NodeJS服务端开发入门(Express+MySQL)
Apr 07 NodeJs
NodeJs模拟登陆正方教务
Apr 28 NodeJs
nodejs 日志模块winston的使用方法
May 02 NodeJs
nodejs更改项目端口号的方法
May 13 NodeJs
nodejs实现套接字服务功能详解
Jun 21 NodeJs
nodejs中express入门和基础知识点学习
Sep 13 NodeJs
NodeJs操作MongoDB教程之分页功能以及常见问题
Apr 09 NodeJs
nodejs nedb 封装库与使用方法示例
Feb 06 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
玩转虚拟域名◎+ .
2006/10/09 PHP
PHP使用微信开发模式实现搜索已发送图文及匹配关键字回复的方法
2017/09/13 PHP
jquery 学习之一 对象访问
2010/11/23 Javascript
JQuery调webservice实现邮箱验证(检测是否可用)
2013/05/21 Javascript
jQuery setTimeout传递字符串参数报错的解决方法
2014/06/09 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
json的使用小结
2016/06/08 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
jQuery 插件实现随机自由弹跳气泡样式
2017/01/12 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
vue 实现通过手机发送短信验证码注册功能
2018/04/19 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
[04:27]2014DOTA2国际邀请赛 NAVI战队官方纪录片
2014/07/21 DOTA
python算法学习之基数排序实例
2013/12/18 Python
解读Django框架中的低层次缓存API
2015/07/24 Python
python如何查看微信消息撤回
2018/11/27 Python
python 2.7 检测一个网页是否能正常访问的方法
2018/12/26 Python
Python中SQLite如何使用
2020/05/27 Python
Python读取xlsx数据生成图标代码实例
2020/08/12 Python
详解Css3新特性应用之过渡与动画
2017/01/10 HTML / CSS
如何让IE9以下版本(ie6/7/8)认识html5元素
2013/04/01 HTML / CSS
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
Perfume’s Club澳大利亚官网:西班牙领先的在线美容店
2021/02/01 全球购物
简述安装Slackware Linux系统的过程
2012/01/12 面试题
年度考核自我评价
2014/01/25 职场文书
公司财务流程之主管工作流程
2014/03/03 职场文书
购房协议书
2014/04/11 职场文书
买卖协议书范本
2014/04/21 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
财务助理岗位职责范本
2014/10/09 职场文书
2014个人年度工作总结
2014/12/15 职场文书
介绍信样本
2015/01/31 职场文书
2016领导干部廉洁从政心得体会
2016/01/19 职场文书
Python基础之pandas数据合并
2021/04/27 Python
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技