写在前面的话

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

前端页面利用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. 解决从Excel导入数据库，导入到DataTable时数据类型发生变化的问题(如数字类型变成科学计数法，百分数变成小数)

    做项目的时候,C#读取Excel数据到DataTable或者DataSet,设断点查看DataTable,发现Excel的显示为较长位数数字的字段如0.000012在DataTable中显示为科学计数 ...

  2. 阿里云数据库MySQL版快速上手！

    MySQL是全球最受欢迎的开源数据库,其在各Web应用中均有广泛部署.阿里云数据库MySQL版基于Alibaba的MySQL源码分支,经过双11高并发.大数据量的考验,拥有优良的性能和吞吐量.除此之外 ...

  3. Ibatis在运行期得到可执行到sql

    环境:oracle-11g ,ibatis-2.0 ,java-1.7 最近因为有个需要是在程序中得到ibatis到sql字符串,即通过以下的ibatis配置得到sql语句 <select id ...

  4. nmcli

    [root@web01 ~]# nmcli device status DEVICE TYPE STATE CONNECTION eth0 ethernet connected eth0 lo loo ...

  5. 移动设备safari不支持jquery的live绑定的解决方案

    给元素加上样式如下即可 <style> .btn{ cursor: pointer; } </style>

  6. Hadoop2.9.1安装教程_环境Ubuntu_VMware安装

    一,环境选择 Hadoop需要运行在linux系统之下,所以有以下两种选择:1,安装双系统,缺点:此方式比较麻烦而且并不适合初学者,因为之后的安装以及配置过程可能会遇到许多问题,这需要我们上网去搜索. ...

  7. Windows桌面美化

    [工具链接]链接: https://pan.baidu.com/s/12aUGsu91F8WfaW5HU5ps3g 提取码: dnan [样例] [美化步骤] 1.解压下载文件,安装两个软件: Sta ...

  8. 【codeforces 505D】Mr. Kitayuta's Technology

    [题目链接]:http://codeforces.com/problemset/problem/505/D [题意] 让你构造一张有向图; n个点; 以及所要求的m对联通关系(xi,yi) 即要求这张 ...

  9. spring boot基础

    1.ANT下面典型的项目层次结构.(1) src存放文件.(2) class存放编译后的文件.(3) lib存放第三方JAR包.(4) dist存放打包,发布以后的代码. 2.Source Folde ...

  10. HDU 5416 CRB and Tree （2015多校第10场）

    欢迎參加--每周六晚的BestCoder(有米!) CRB and Tree Time Limit: 8000/4000 MS (Java/Others)    Memory Limit: 65536 ...