jq Paginator结合express实现分页效果

本文主要为大家详细介绍了jqpaginator结合express实现分页展示内容效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。

写在前面的话

分页展示内容也是我们在页面开发中经常会遇到的需求
前端页面利用jqPaginator这个jquery插件来编写
后端利用mysql存储数据

开始敲代码

回顾sql知识

首先让我们回顾一下sql语句,我们只想查询出数据表里的某几条用limit实现

select * from 表名 limit [offset,] rows

其中,limit后面可以跟两个参数,也可以跟一个参数。
跟一个参数表示rows,相当于offset=0,从数据表中的第一条记录开始查询出rows条数据。
跟两个参数的话,第一个是从0开始的偏移量,第二个参数表示想查询出来的记录数。

利用jqPaginator这个优秀的jquery分页插件编写一个分页条

注意:这个分页是基于bootstrap3.1.1写出来的

nbsp;html>     

  

登录后复制       $.jqPaginator('#pagination1', { totalPages: 100, visiblePages: 3, currentPage: 1, onPageChange: function (num, type) { if (type == 'change') { //这里是点击分页的回调 } } });

jq Paginator结合express实现分页效果

这里我们可以方便的把分页按钮写出来

后台代码

router.get('/pages', function (req, res, next) {  // res.json({"name": 123});  var page = req.query.page;  var page = (--page)*5;  var connection = mysql.createConnection({    host: '127.0.0.1',    port: 3306,    user: 'root',    password: 'root',    database: 'vr02'  });  connection.connect(function(err) {    if (err) {      throw err;    }    console.log('连接数据库成功');  });  connection.query('select * from user limit ?, 5',当前1/2页 12下一页阅读全文

登录后复制

相关推荐:

简单实现Ajax无刷新分页效果

php实现分页效果的示例

webpack+express多页站点开发实例详解

以上就是jq Paginator结合express实现分页效果的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2791055.html

(0)
上一篇 2025年3月8日 19:05:16
下一篇 2025年3月8日 19:05:26

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • bootstrap paginator分页插件使用方法

    bootstrap paginator是一款基于bootstrap的js分页插件,本文主要给大家介绍bootstrap paginator分页插件的两种使用方式,一起看看吧,希望能帮助到大家。 【相关视频推荐:Bootstrap教程】 分页…

    编程技术 2025年3月8日
    200
  • Express multer上传与使用详解

    本文主要介绍了express系列之multer上传的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 这两天在看《nodejs权威指南》,这本书看了好久了,但是读的一直不细,这次才好好看了…

    2025年3月8日
    200
  • vue中使用express和fetch获取本地json文件技巧分享

    本文主要介绍了详解vue中使用express+fetch获取本地json文件,非常具有实用价值,需要的朋友可以参考下,希望能帮助到大家。 自己在做个vue小demo的时候,想模拟从服务器获取json数据的过程,一开始的想法是使用fetch直…

    2025年3月8日
    200
  • 让Express支持async方法分享

    本文主要介绍了详解如何让express支持async/await,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 随着 Node.js v8 的发布,Node.js 已原生支持 async/a…

    2025年3月8日
    200
  • express与koa的使用对比

    express和koa都是服务端的开发框架,服务端开发的重点是对http request和http response两个对象的封装和处理,应用的生命周期维护以及视图的处理等。 提到Node.js开发,不得不提目前炙手可热的2大框架expre…

    2025年3月8日
    200
  • node通过实现express搭建自己的服务器实例

    本文主要介绍node通过express搭建自己的服务器 ,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 前言 为了模拟项目上线,我们就需要一个服务器去提供API给我们调用数据。这次我采用ex…

    编程技术 2025年3月8日
    200
  • 全面掌握Express cookie-parser中间件

    cookie-parser 是express的中间件,用来实现cookie的解析,是官方脚手架内置的中间件之一。它的使用非常简单,但在使用过程中偶尔也会遇到问题。一般都是因为对 express + cookie-parser 的签名、验证机…

    编程技术 2025年3月8日
    200
  • express、multer实现node中图片上传功能

    在前端中,我们使用ajax来异步上传图片,使用file-input来上传图片,使用formdata对象来处理图片数据,post到服务器中,在node中使用multer中间件来对上传路由接口进行处理。本文主要和大家介绍使用express+mu…

    2025年3月8日
    200
  • 在express站点中使用ejs模板引擎实例详解

    本文主要和大家介绍在express站点中使用ejs模板引擎,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 使用 vs创建的express站点,默认使用的是jade模板引擎,但是我不太喜欢这种…

    2025年3月8日
    200
  • 利用express启动server服务方法分享

    本文主要和大家分享利用express启动一个server服务的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。 安装express $ npm install express &#821…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论