nodejs+bootstrap实现分页效果
2014-04-17 10:53
716 查看
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 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 href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>'; }else{ pagehtml+= '<li><a href="/course/index/'+(i+1)+'">'+(i+1)+'</a></li>'; } } } if(currentpage<counts){ pagehtml+= '<li><a href="/course/index/'+(currentpage+1)+'">下一页</a></li>'; } } $("#pagination").html(pagehtml); } });注意:locals.pagecount,locals.pagesize,locals.currentpage分别是数据库数量,分页大小,当前分页,他们是从js中传递过来的,当然,你也可以直接修改它们为固定的数据测试下效果。
比如:
实际效果为:
这样一个简单的分页效果就出来了
相关文章推荐
- nodejs+bootstrap实现分页效果
- Node.js中Bootstrap-table的两种分页的实现方法
- Vue.js 结合bootstrap 前端实现分页效果
- Node.js中Bootstrap-table的两种分页的使用方法
- fieldset实现下订单的分页效果(js+css+html)
- JS组件Bootstrap实现弹出框和提示框效果代码
- Mysql 数据分页处理(Node.js的实现)
- 原生js实现分页的效果
- Ajax+js+dom+json+php+mysql实现仿google的超强分页、隔行变色效果
- node和bootstrap-table实现最简单的服务端分页
- nodejs+mongodb实现curd 登录 注销 分页等功能的实现过程
- chart.js + bootstrap +jquery.js 实现的 html5 图表绘制效果
- 利用BootStrap的Carousel.js实现轮播图动画效果
- JS组件Bootstrap Table表格行拖拽效果实现代码
- Bootstrap实现基于carousel.js框架的轮播图效果
- JS+CSS实现的拖动分页效果实例
- 原生JS实现分页效果1.0
- 详解Bootstrap中JS插件实现下拉菜单效果
- bootstrap table服务端实现分页效果
- JS组件Bootstrap实现弹出框和提示框效果代码