写在前面的话

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

前端页面利用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. mac上卸载node

    //卸载方法一 有时手贱看到新版本就升级,升级后发现一堆模块不能用了,心情好慢慢调,但也有调不好的时候,只能卸载重装低版本的node了. 我的机器环境如下 1. Mac OSX 10.10.3 2. ...

  2. MySQL查询结果保存到本地

    #!/bin/bash mysql -h<公网IP> -P<端口号> -u<用户名> -p<密码> -D<指定数据库> >/Users ...

  3. ZBrush软件Texture纹理调控板

    在zbrush4r8中对一个模型进行纹理制作在速度和易用性方面有诸多优势,通过Texture调控板创建.导入和输出纹理是及其方便且快捷的. Import (导入):导入Photoshop (.psd) ...

  4. IDEA里面的facets和artifacts的讲解

    Facets: Facets表述了在Module中使用的各种各样的框架.技术和语言.这些Facets让Intellij IDEA知道怎么对待module内容,并保证与相应的框架和语言保持一致. 使用F ...

  5. css控制单行或者多行文本超出显示省略号

    1.单行文本 使用text-overflow:ellipsis属性 text-overflow: clip|ellipsis|string; clip:修剪文本. ellipsis:显示省略符号来代表 ...

  6. BZOJ 3786 星系探索 (splay+dfs序)

    题目大意:给你一棵树,支持一下三种操作 1.获取某节点到根节点的路径上所有节点的权值和 2.更换某棵子树的父亲 3.某子树内所有节点的权值都增加一个值w 当时想到了splay维护dfs序,查完题解发现 ...

  7. Flask-Babel 使用简介(翻译文档)

    最近用flask-bable翻译一个项目,在网站上查找到有一个示例文档,地址:http://translations.readthedocs.io/en/latest/flask-babel.html ...

  8. 页面下载文件方法，post与get

    一般下载文件,常见使用的是window.open('url'):方法进行下载.若需要带参数,直接在url后面拼接参数,进行传递.window.open方法仅可以进行get方法进行参数提交. 若需要进行 ...

  9. oracle用户锁定

    https://www.cnblogs.com/lostyue/archive/2011/12/06/2278063.html

  10. HDU 4309 Contest 1

    最大流建图.开始以为旧桥有1000座,没敢用枚举,后来看看题目发现了只是十二座.枚举桥的状态没问题. 对于隧道的容量W,可以虚拟出第三个结点表示,如u->v.增加一个点p,u->p(INF ...