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

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分页效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • NodeJS实现客户端js加密

    思路: 服务端渲染业务代码js => 前后端约定加密算法 => 业务代码进行签名 => 客户端解密业务代码 => eval 执行 Node 路由示例: /** * 请自定义 restful API 这里以 GET 为例 * @param {req} * @param {res} * @return {next()} */ //var util = require('utility'); exports.encryption = function(req, res){ //GET v

  • 简单实现nodejs上传功能

    本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下 npm install formidable var formidable = require('formidable'), http = require('http'), util = require('util'); http.createServer(function(req, res) { if (req.url == '/index' && req.method.toLowerCase() ==

  • NodeJS使用formidable实现文件上传

    最近自学了一下NodeJS,然后做了一个小demo,实现歌曲的添加.修改.播放和删除的功能,其中自然要实现音乐和图片的上传功能.于是上网查找资料,找到了一个formidable插件,该插件可以很好的实现文件的上传功能.该小demo用到了MySQL数据库,所有的数据都存放到了数据库中.下面简单说一些如何使用. 1.创建app.js主文件 const express = require('express'); const router = require('./router'); const pat

  • 基于NodeJS+MongoDB+AngularJS+Bootstrap开发书店案例分析

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能,总结前端学习过的内容. 技术:NodeJS.Express.Monk.MongoDB.AngularJS.BootStrap.跨域 效果: 一.Bootstrap Bootstrap是一个UI框架,它支持响应式布局,在PC端与移动端都表现不错. Bootstrap是Twitter推出的一款简洁.直

  • window通过vbs+bat实现自动在后台运行nodejs application

    环境:window8.1 原理就是通过vbs无窗口后台运行bat文件 1.新建一个.bat文件.内容如: @ECHO ON f: cd \repositories\yyper start /b nodemon index.js -f 2.新建一个.vbs文件.内容如: Set ws = CreateObject("Wscript.Shell") ws.run "cmd /c run-yyper-blog.bat",vbhide 双击.vbs文件即可.本人通过该方法启

  • nodejs连接mongodb数据库实现增删改查

    准备 1.通过npm命令安装mongodb 2.安装mongodb数据库,这里不详细介绍了,安装网址:http://www.jb51.net/article/82522.htm CRUD操作 在此之前应对MongoDB数据库有所了解,知道它的一些增删查改命令. 1.增加 var MongoClient = require("mongodb").MongoClient; var DB_URL = "mongodb://localhost:27017/chm"; fun

  • 详解NodeJs支付宝移动支付签名及验签

    非常感谢 :http://www.jianshu.com/p/8513e995ff3a?utm_campaign=hugo&utm_medium=reader_share&utm_content=note&utm_source=weibo 的文章,如果不是找到这篇文章我可能还要继续坑几天,代码也基本都是照着他的搬过来的,不过支付宝移动支付文档写的非常糟糕而且没有node的SDK和demo,写起来异常痛苦..好在找到了这篇文章顺便折腾了一下午支付宝的技术人员总算把移动支付整个流程给做

  • nodejs简单实现操作arduino

    用Javascript来操作硬件早就不是一件稀奇的事情了. 所以作为一名电子专业出身的FE,我也打算尝试一下用js来驱动arduino: 要想操作这些底层硬件,肯定是需要一些工具的,我这里介绍的工具主要是 cylonjs 和 gort cylonjs其实就是一个操作"机器"的js框架,官网的介绍是这样的: Cylon.js is a JavaScript framework for robotics, physical computing, and the Internet of Th

  • nodeJS删除文件方法示例

    本文实例讲述了nodeJS删除文件方法.分享给大家供大家参考,具体如下: var fs = require("fs"); var path = require("path"); deleteFolderRecursive = function(url) { var files = []; //判断给定的路径是否存在 if( fs.existsSync(url) ) { //返回文件和子目录的数组 files = fs.readdirSync(url); files.

  • 初探nodeJS

    一.node概要 对nodeJS早有耳闻,但是一直迟迟没有对它下手,哈哈哈,今儿咱就来初探一下它. nodeJS是个啥东东? nodeJS,我的理解就是可以运行在后端的JavaScript. 为什么它能够在后端运行呢? 这就得归功于V8引擎(V8是Google Chrome浏览器的JavaScript引擎),通过对高性能V8引擎的封装,并通过一系列优化的API类库,使其就能够在后端运行了. 并且node有两大特点: 1.基于事件驱动: 2.无阻塞. 从而nodeJS非常适合处理并发请求. 大家都

  • 学习 NodeJS 第八天:Socket 通讯实例

    前言 一般来讲,HTTP 是基于文本的"单向"通讯机制.这里所谓的"单向",乃相对于"双向"而言,因为 HTTP 服务器只需根据请求返还恰当的 HTML 给客户端即可,不涉及客户端向服务端的通讯.这种单向的机制比较简单,对网络质量要求也不高.而更多的场景则是需要可靠.稳定的端到端连接.一般这种服务是实时的.有态的而且是长连接,长连接则暗示两段须达致相向通讯的能力,也就说是服务端客户端两者间能够实时地相互间通信.毫无疑问,能够实时通信的服务器正是我

  • Nodejs 搭建简单的Web服务器详解及实例

    使用 Nodejs 搭建简单的Web服务器 使用Nodejs搭建Web服务器是学习Node.js比较全面的入门教程,因为要完成一个简单的Web服务器,你需要学习Nodejs中几个比较重要的模块,比如:http协议模块.文件系统.url解析模块.路径解析模块.以及301重定向问题,下面我们就简单讲一下如何来搭建一个简单的Web服务器. 作为一个Web服务器应具备以下几个功能: 1.能显示以.html/.htm结尾的Web页面 2.能直接打开以.js/.css/.json/.text结尾的文件内容

随机推荐