写在前面的话

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

前端页面利用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. 【AnjularJS系列6 】 过滤器

    第六篇,过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. o ...

  2. addEventListener()与removeEventListener(),追加事件和删除追加事件

    addEventListener()与removeEventListener()用于追加事件和删除追加.所有的DOM节点中都包含这两种方法,并且它们都接受3个参数:要处理的事件名.作为事件处理程序的函 ...

  3. day09-2 字典，集合的内置方法

    目录 字典的内置方法 作用 定义方式 方法 优先掌握 需要掌握 存储一个值or多个值 有序or无序 可变or不可变 集合的内置方法 作用 定义方式 方法 存储一个值or多个值 有序or无序 可变or不 ...

  4. 使用Eclipse将项目上传至远程GitLab

    一.先将项目提交至本地仓库 1.  右击项目——Team——Share Project… 2.在弹出框中,选择Git——Next 3.在弹出框中进行如下步骤操作 4.至此,我们已经成功创建了本地GIT ...

  5. JSP获取json格式的数据报错 Uncaught SyntaxError: Unexpected identifier

    后台json字符串是 {"id":"cmdb_ci.`fully_qualified_domain_name`","field":" ...

  6. composer install或者update 出错

    composer install或者update  出错Your requirements could not be resolved to an installable set of package ...

  7. HDU 1558 Segment set（ 判断线段相交 + 并查集 ）

    链接:传送门 题意:输入一个数 n 代表有 n 组操作,P 是在平面内加入一条线段,Q x 是查询第 x 条线段所在相交集合的线段个数 例如:下图 5 与 1.2 相交,1 与 3 相交,2 与 4 ...

  8. [读书笔记] R语言实战 （十三） 广义线性模型

    广义线性模型扩展了线性模型的框架,它包含了非正态的因变量分析 广义线性模型拟合形式: $$g(\mu_\lambda) = \beta_0 + \sum_{j=1}^m\beta_jX_j$$ $g( ...

  9. thinkPHP的Excel插件

    原文地址 http://www.thinkphp.cn/topic/14005.html 总结的注意事项 1实例化第三方类,要在类名前加\ ,不然引用地址不对. 实现步骤:一:在http://phpe ...

  10. HDU 4324 Contest 3

    直接DFS即可 #include <iostream> #include <string.h> #include <algorithm> #include < ...