当前位置：首页 > 资讯 > 技术文档

jqPaginator结合express实现分页展示内容效果第1/2页

时间：2021-04-14 02:53 编辑：来源：阅读：
扫一扫，手机访问

摘要：jqPaginator结合express实现分页展示内容效果第1/2页

[b]写在前面的话[/b] 分页展示内容也是我们在页面开发中经常会遇到的需求前端页面利用jqPaginator这个jquery插件来编写后端利用mysql存储数据 [b]开始敲代码[/b] [b]回顾sql知识[/b] 首先让我们回顾一下sql语句，我们只想查询出数据表里的某几条用limit实现 select * from 表名 limit [offset,] rows 其中，limit后面可以跟两个参数，也可以跟一个参数。跟一个参数表示rows，相当于offset=0,从数据表中的第一条记录开始查询出rows条数据。跟两个参数的话，第一个是从0开始的偏移量，第二个参数表示想查询出来的记录数。 [b]利用jqPaginator这个优秀的jquery分页插件编写一个分页条[/b] 注意：这个分页是基于bootstrap3.1.1写出来的

<!DOCTYPE html>
<html>
 <head>
 <link type="text/css" rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.1.1/css/bootstrap.min.css"/>
 </head>
 <body>
 <div style="text-align: center;">
  <ul class="pagination" id="pagination1"></ul>
 </div>
 
 </body>
 <script src="/javascripts/jquery.min.js"></script>
 <script src="/javascripts/jqPaginator.js"></script>
 <script>
 $.jqPaginator('#pagination1', {
  totalPages: 100,
  visiblePages: 3,
  currentPage: 1,
  onPageChange: function (num, type) {
   if (type == 'change') {
     //这里是点击分页的回调
   }
  }
 });
 

 </script>
</html>

[img]http://files.jb51.net/file_images/article/201704/201741785934305.jpg?201731785948[/img] 这里我们可以方便的把分页按钮写出来 [b]后台代码[/b]

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页 [b]1[/b][url=http://www.1sucai.cn/article/111307_2.htm]2[/url][url=http://www.1sucai.cn/article/111307_2.htm]下一页[/url][url=http://www.1sucai.cn/article/111307_all.htm]阅读全文[/url]

[h3]您可能感兴趣的文章:[/h3][list][*][url=http://www.1sucai.cn/article/107946.htm]使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例[/url][/*][*][url=http://www.1sucai.cn/article/107921.htm]基于vue实现分页/翻页组件paginator示例[/url][/*][*][url=http://www.1sucai.cn/article/101099.htm]根据Bootstrap Paginator改写的js分页插件[/url][/*][*][url=http://www.1sucai.cn/article/94800.htm]Bootstrap分页插件之Bootstrap Paginator实例详解[/url][/*][*][url=http://www.1sucai.cn/article/85368.htm]Bootstrap Paginator分页插件使用方法详解[/url][/*][*][url=http://www.1sucai.cn/article/85235.htm]Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果[/url][/*][*][url=http://www.1sucai.cn/article/28348.htm]用jQuery中的ajax分页实现代码[/url][/*][*][url=http://www.1sucai.cn/article/48714.htm]jQuery scroll事件实现监控滚动条分页示例[/url][/*][*][url=http://www.1sucai.cn/article/46535.htm]JQuery+Ajax无刷新分页的实例代码[/url][/*][*][url=http://www.1sucai.cn/article/24920.htm]基于jQuery的实现简单的分页控件[/url][/*][/list]

[b]Tags：[/b][url=http://common.jb51.net/tag/jqPaginator/1.htm]jqPaginator[/url] [url=http://common.jb51.net/tag/express/1.htm]express[/url] [url=http://common.jb51.net/tag/%E5%88%86%E9%A1%B5/1.htm]分页[/url]

[h1]相关文章[/h1] [list][*]2015-05-05[url=http://www.1sucai.cn/article/66522.htm]JQuery分屏指示器图片轮换效果实例[/url][/*][*]2014-01-01[url=http://www.1sucai.cn/article/45803.htm]jquery sortable的拖动方法示例详解[/url][/*][*]2014-12-12[url=http://www.1sucai.cn/article/58450.htm]jQuery实现表单提交时判断的方法[/url][/*][*]2011-01-01[url=http://www.1sucai.cn/article/26080.htm]jQuery 1.5最新版本的改进细节分析[/url][/*][*]2013-02-02[url=http://www.1sucai.cn/article/33757.htm]Jquery UI震动效果实现原理及步骤[/url][/*][*]2017-03-03[url=http://www.1sucai.cn/article/107211.htm]利用imgareaselect辅助后台实现图片上传裁剪[/url][/*][*]2013-11-11[url=http://www.1sucai.cn/article/42806.htm]jquery遍历数组与筛选数组的方法[/url][/*][*]2013-09-09[url=http://www.1sucai.cn/article/41308.htm]jQuery图片轮播的具体实现[/url][/*][*]2014-11-11[url=http://www.1sucai.cn/article/57883.htm]jquery操作对象数组元素方法详解[/url][/*][*]2017-06-06[url=http://www.1sucai.cn/article/116627.htm]jquery加载单文件vue组件的方法[/url][/*][/list]

[url=http://www.1sucai.cn/article/111307.htm#comments][/url]

[h1]最新评论[/h1]

全部评论(0)

上一篇：jQuery的Ajax的自动完成功能控件简要说明
下一篇：jQuery实现标题有打字效果的焦点图代码

资讯排行榜
更多>>