写在前面的话

分页展示内容也是我们在页面开发中经常会遇到的需求

前端页面利用jqPaginator这个jquery插件来编写

后端利用mysql存储数据

开始敲代码

回顾sql知识

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

select * from 表名 limit [offset,] rows

其中，limit后面可以跟两个参数，也可以跟一个参数。

跟一个参数表示rows，相当于offset=0,从数据表中的第一条记录开始查询出rows条数据。

跟两个参数的话，第一个是从0开始的偏移量，第二个参数表示想查询出来的记录数。

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

注意：这个分页是基于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>

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

后台代码

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',[page],function (err,data,fields) {

		if (err) {

			throw err;

		}

		res.json(data);

		connection.end();

	});

});

后台代码连接数据库，并且将部分记录返回给客户端

发送ajax请求获取记录数

    function getDatas(page) {

    	$.ajax({

    		type: 'get',

    		url: '/pages',

    		data: 'page='+page,

    		dataType: 'json',

    		success: function (data) {

    			var html = '';

    			for (var i = 0; i < data.length; i++) {

    				html += '<tr>';

    				html += '<td>' + data[i].id + '</td>';

    				html += '<td>' + data[i].user + '</td>';

    				html += '<td>' + data[i].pass + '</td>';

    				html += '</tr>';

    			}

    			console.log(html);

    			$("#content").html(html);

    		}

    	})

    }

OK!大功告成!

express + jqPaginator 分页展示内容的更多相关文章

  1. Java Web中将oracle的数据库内容以表格形式展现到页面中（分页展示）

    分页SQL语句: ----分页显示 select * from (select rownum as r,t.* from () ; 查询的结果如下: 这个SQL,使用了三层嵌套的查询方式: 1)最内层 ...

  2. Django学习（5）优雅地分页展示网页

    在我们平时浏览网页时,经常会遇到网页里条目很多的情形,这时就会用到分页展示的功能.那么,在Django中,是如何实现网页分类的功能的呢?答案是Paginator类. 本次分享讲具体展示如何利用Djan ...

  3. C#-WebForm-组合查询（Queryable延迟查询、Intersect交集）、分页展示基础

    组合查询: 方法一:Queryable<> 延迟查询 其特点是:读到词句代码时不会立即执行,而是在进行数据绑定时执行 优点:此期间可以进行添加查询条件,以减少数据库查询内容,来减少内存占用 ...

  4. Decoration4：分页展示

    现在我们实现前台List的分页展示,这也是最基本的要求 先看现在的Rest数据格式,在spring的默认返回中,分页用到的元素都已经在page节点中返回了,只要在前台合理利用就足够了 { " ...

  5. R+tmcn笔记︱tmcn包的基本内容以及李舰老师R语言大会展示内容摘录

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- tmcn包目前托管在在R-forge 上开发和 ...

  6. 将展示内容（div、iframe）放在Expand控件中

    Expand是ArcGIS JavaScript API 4.3推出的一个widget(控件),用于承载一个HTML DOM元素,可以把一个自己编写的div或者是一个其他的Esri widget控件放 ...

  7. 自定义jq插件，鼠标悬浮展示图片或者视频放大图，可自定义展示内容

    网站项目经常会遇到一些视频或者图片素材的展示功能,那么就需要自己写一个功能,就是在一些列表页面你想要是这个数据的详细内容,弹框在页面某个位置 例如这是视频悬浮展示效果,可自定义自动播放等属性标签 又例 ...

  8. 使用Bootstrap 3开发响应式网站实践06,使用ListGroup、Thumbnails展示内容

    □ ListGroup展示内容 当希望把同类型的内容以列表.区块展示的时候,ListGroup是不错的选择. <div class="col-sm-6"> <h3 ...

  9. 使用Bootstrap 3开发响应式网站实践05,使用Tab、Modal、Form展示内容,使用Popover、Tooltip展示提示信息

    本篇体验用Tab插件显示内容.Html部分为: <div class="row" id="moreInfo"> <div class=&quo ...

随机推荐

  1. Windows 安装 MySQL8

    MySQL8下载地址:https://dev.mysql.com/downloads/mysql/ 解压到安装目录 新建配置文件my.ini [mysqld]# 设置mysql的安装目录basedir ...

  2. Paper-[arXiv 1710.03144]Island Loss for Learning Discriminative Features in Facial Expression

    [arXiv 1710.03144]Island Loss for Learning Discriminative Features in Facial Expression ABSTRACT 作者在 ...

  3. 关于C++程序运行程序是出现的this application has requested the runtime to terminate it in an unusual way. 异常分析

    今天运行程序是出现了this application has requested the runtime  to terminate it in an unusual way. 的异常报告,以前也经常 ...

  4. Codeforces Round #493 (Div. 1) B. Roman Digits 打表找规律

    题意: 我们在研究罗马数字.罗马数字只有4个字符,I,V,X,L分别代表1,5,10,100.一个罗马数字的值为该数字包含的字符代表数字的和,而与字符的顺序无关.例如XXXV=35,IXI=12． 现 ...

  5. Label,PushButton,ToolButton 实现动态图片按钮，Label显示gif动画

    .h文件 public: explicit event(QWidget *parent = 0); ~event(); QImage image; QLabel *label; QLabel *lab ...

  6. 紫书 例题7-14 UVa 1602（搜索+STL+打表）

    这道题想了很久不知道怎么设置状态,怎么拓展,怎么判重, 最后看了这哥们的博客 终于明白了. https://blog.csdn.net/u014800748/article/details/47400 ...

  7. 2015 Multi-University Training Contest 8 hdu 5389 Zero Escape

    Zero Escape Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others)Tot ...

  8. l洛谷 P2326 AKN’s PPAP

    P2326 AKN’s PPAP 题目描述 “I have a pen,I have an apple.Eh,Apple-Pen!. I have a pen,I have pineapple.En, ...

  9. Chrome的JSON View插件

    Chrome的JSON View插件 学习了:http://www.cnplugins.com/zhuanti/five-chrome-json-plugins.html 下载了:http://www ...

  10. 小胖说事30------iOS 强制转成横屏的方式

    一直遇到这个问题,今天最终找到了解决方法. 在我们的项目中常常遇到横竖屏切换,而又有某个特定的界面必须是特定的显示方式(横屏或竖屏).这就须要例如以下的处理了. 强制转成横屏: if ([[UIDev ...