jqPaginator结合express实现分页展示内容效果第1/2页
更新时间：2017年04月17日 08:55:35 作者：靳刘杰
这篇文章主要为大家详细介绍了jqPaginator结合express实现分页展示内容效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
写在前面的话
分页展示内容也是我们在页面开发中经常会遇到的需求
前端页面利用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',
您可能感兴趣的文章:- Django的分页器实例(paginator)
- Django原生sql也能使用Paginator分页的示例代码
- bootstrap paginator分页插件的两种使用方式实例详解
- 快速掌握jquery分页插件jqPaginator的使用方法
- bootstrap paginator分页前后台用法示例
- 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
- 基于vue实现分页/翻页组件paginator示例
- 根据Bootstrap Paginator改写的js分页插件
- Bootstrap分页插件之Bootstrap Paginator实例详解
- Bootstrap Paginator分页插件使用方法详解
- Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
- Django使用paginator插件实现翻页功能的实例
相关文章
这篇文章主要介绍了jQuery不使用插件及swf实现无刷新文件上传,需要的朋友可以参考下2014-12-12
新浪网易的评论块制作 因为 textarea里面不能放图片，所以和新浪的做法一样，选用iframe放内容，然后隐藏一个 textarea用于提交。2010-07-07
这篇文章主要介绍了jQuery中通过ajax的get()函数读取页面的方法,需要的朋友可以参考下2016-02-02
下面小编就为大家带来一篇jQuery的ajax和遍历数组json实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要介绍了jQuery提示框插件SweetAlert用法,结合实例形式分析了SweetAlert提示框插件基本功能、使用方法及配置项设置方法,需要的朋友可以参考下2019-08-08
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
这篇文章主要介绍了jQuery实现浏览器之间跳转并传递参数功能,具有支持中文字符传输的功能,涉及jQuery编码转换、事件响应、页面跳转等相关操作技巧,需要的朋友可以参考下2018-03-03
jquery easyui dataGrid动态改变排序字段名的方法
jQuery easyui dataGrid 动态改变排序字段名，一般情况下，在使用的时候，我们会点击相应字段进行排序。今天小编以java为例给大家讲解问题原因及解决方案，需要的的朋友参考下2017-03-03
在JQuery Mobile中，多个页面的切换是通过<a>元素、并将<href>属性设置为#+对应的id号的方式进行的2013-01-01
这篇文章主要介绍了jQuery实现火焰灯效果导航菜单的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码，学习jquery的朋友可以参考下。2011-08-08
最新评论