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实现批量替换文件内容示例

    Node.js实现批量替换文件内容示例

    这篇文章主要为大家介绍了Node.js实现批量替换文件内容示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • nodejs 生成和导出 word的实例代码

    nodejs 生成和导出 word的实例代码

    前段时间由于项目需求,得做excel和word的导出功能.这篇文章主要介绍了nodejs 生成和导出 word的实例代码,需要的朋友可以参考下
    2018-07-07
  • 什么时候不能在 Node.js 中使用 Lock Files

    什么时候不能在 Node.js 中使用 Lock Files

    这篇文章主要介绍了什么时候不能在 Node.js 中使用 Lock Files,但是当你在开发要发布到 npm 的包时,应避免使用这类 lock file 。下面我们来一起了解一下吧
    2019-06-06
  • node.js中的path.extname方法使用说明

    node.js中的path.extname方法使用说明

    这篇文章主要介绍了node.js中的path.extname方法使用说明,本文介绍了path.extname的方法说明、语法、使用实例和实现源码,需要的朋友可以参考下
    2014-12-12
  • Node.js中修改全局变量的方式及注意事项

    Node.js中修改全局变量的方式及注意事项

    本文详细介绍了在Node.js中如何修改全局变量,包括全局变量的定义方式、正确的修改姿势、潜在的隐患及其解决方案,以及推荐的替代方案,总结建议了在实际应用中应尽量避免使用全局变量,转而采用模块化、可维护性更高的方法,感兴趣的朋友一起看看吧
    2025-02-02
  • nodejs中express入门和基础知识点学习

    nodejs中express入门和基础知识点学习

    这篇文章给大家分享了关于学习nodejs中express入门和基础知识点内容,有兴趣的朋友们参考下。
    2018-09-09
  • Node.js中 __dirname 的使用介绍

    Node.js中 __dirname 的使用介绍

    这篇文章主要给大家介绍了关于Node.js中 __dirname使用的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。
    2017-06-06
  • NodeJS中的MongoDB快速入门详细教程

    NodeJS中的MongoDB快速入门详细教程

    MongoDB 是一个基于分布式文件存储的数据库,由 C++ 语言编写。这篇文章主要介绍了NodeJS中的MongoDB快速入门详细教程的相关资料,需要的朋友可以参考下
    2016-11-11
  • node.js快速部署vue代码详细步骤

    node.js快速部署vue代码详细步骤

    众所周知Vue是现在前端最流行的框架之一,作为前端开发人员应该要熟练的掌握它,下面这篇文章主要给大家介绍了关于node.js快速部署vue代码的详细步骤,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2023-05-05
  • node爬取新型冠状病毒的疫情实时动态

    node爬取新型冠状病毒的疫情实时动态

    这篇文章主要介绍了node爬取新型冠状病毒的疫情实时动态,非常不错,本文通过实例代码给大家讲解的非常详细,需要的朋友可以参考下
    2020-02-02

最新评论