写在前面的话

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

前端页面利用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. 动画view

    1:view动画 @1:xml中 alph:渐变透明度动画效果 scale:渐变尺寸伸缩动画效果 translate:画面转换位置移动动画效果 rootate:画面转移旋转动画效果 @2:JavaCo ...

  2. ES modules

    注意:这篇文章讲的是正经的es module规范 及浏览器的实现!webpack项目中es module会被parse成commonjs,和这个没大关系! 总结: ES模块加载的主要过程: 构造 —— ...

  3. 一些html5

    ---匿名函数(funcation(){}())---- 一.拖拽 draggable=ture-----A拖动元素上事件 1. 拖拽开始:ondragstart2. 拖拽中:ondrag3. 拖拽结 ...

  4. HDU 1023 Train Problem II（ 大数卡特兰 ）

    链接:传送门 题意:裸卡特兰数,但是必须用大数做 balabala:上交高精度模板题,增加一下熟悉度 /************************************************ ...

  5. sort函数用法详解

    用于C++中,对给定区间所有元素进行排序.头文件是#include <algorithm> sort函数进行快速排序,时间复杂度为n*log2n,比冒泡之类的要省时不少 Sort函数使用模 ...

  6. 模板 FFT 快速傅里叶变换

    FFT模板,原理不难,优质讲解很多,但证明很难看太不懂 这模板题在bzoj竟然是土豪题,服了 #include <cmath> #include <cstdio> #inclu ...

  7. 解决tpcc_load 报错 error while loading shared libraries: libmysqlclient.so.20

    在刚开始导入tpcc数据仓库时,可能会遇到 error while loading shared libraries: libmysqlclient.so.20这个错误,找不到库文件. 但是,通过fi ...

  8. HBase入门操作 常用命令和增删改查的简单应用操作

    这里启动关闭Hadoop和HBase的顺序一定是: 启动Hadoop—>启动HBase—>关闭HBase—>关闭Hadoop ssh localhost 开启hadoopcd /us ...

  9. 14、反射（reflect）

    一.反射概念 不用实例化也可以调用类中的私有成员:反射慢,实例化快:反射可以看到其他类中的内部构造,透明,但是不安全. JAR:JAVA函数库 WAR:web发布的包 YAR:RPC服务 二.idea ...

  10. ios+openflow 问题

    环境:xcode5.1+ios7.1 需求:A试图 的scroll加入 B视图:[A addSubview:B.view] 问题: 1.B视图载入到A视图上了,但Openflow的图片未载入.后经调试 ...