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

 更新时间:2016年11月07日 10:23:17   作者:l284849736  
这篇文章主要介绍了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分页效果的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Node.js中package.json中库的版本号(~和^)

    Node.js中package.json中库的版本号(~和^)

    这篇文章主要介绍了Node.js中package.json中库的版本号(~和^),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-04-04
  • Node.JS文件系统解析实例详解

    Node.JS文件系统解析实例详解

    这篇文章主要介绍了Node.JS文件系统解析实例详解的相关资料,需要的朋友可以参考下
    2017-05-05
  • 如何使用axios库在Node.js中进行代理请求(实践案例)

    如何使用axios库在Node.js中进行代理请求(实践案例)

    axios是一个强大的基于Promise的HTTP客户端,它在浏览器和Node.js环境中均可使用,本文将介绍如何充分利用axios库,在Node.js中进行代理请求的最佳实践,并通过一个实际案例来展示其应用,感兴趣的朋友一起看看吧
    2024-03-03
  • electron demo项目npm install安装失败的解决方法

    electron demo项目npm install安装失败的解决方法

    下面小编就为大家分享一篇electron demo项目npm install安装失败的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • 详解前端任务构建利器Gulp.js使用指南

    详解前端任务构建利器Gulp.js使用指南

    这篇文章主要介绍了前端任务构建利器Gulp.js使用指南,对Gulp.js感兴趣的同学,可以参考下
    2021-04-04
  • Nodejs搭建wss服务器教程

    Nodejs搭建wss服务器教程

    这篇文章主要为大家详细介绍了Nodejs搭建wss服务器的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 学习使用grunt来打包JavaScript和CSS程序的教程

    学习使用grunt来打包JavaScript和CSS程序的教程

    这篇文章主要介绍了学习使用grunt来打包JavaScript和CSS程序的教程,grunt基于node.js和需要的朋友可以参考下
    2016-01-01
  • Node.js DES加密的简单实现

    Node.js DES加密的简单实现

    下面小编就为大家带来一篇Node.js DES加密的简单实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-07-07
  • nodejs调取微信收货地址的方法

    nodejs调取微信收货地址的方法

    这篇文章主要为大家详细介绍了nodejs调取微信收货地址的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-12-12
  • Express实现定时发送邮件的示例代码

    Express实现定时发送邮件的示例代码

    在开发中我们有时候需要每隔 一段时间发送一次电子邮件,或者在某个特定的时间进行发送邮件,无需手动去操作,基于这样的情况下我们需要用到了定时任务。本文就来用Express实现定时发送邮件吧
    2023-04-04

最新评论