jqPaginator結(jié)合express實現(xiàn)分頁展示內(nèi)容效果第1/2頁
寫在前面的話
分頁展示內(nèi)容也是我們在頁面開發(fā)中經(jīng)常會遇到的需求
前端頁面利用jqPaginator這個jquery插件來編寫
后端利用mysql存儲數(shù)據(jù)
開始敲代碼
回顧sql知識
首先讓我們回顧一下sql語句,我們只想查詢出數(shù)據(jù)表里的某幾條用limit實現(xiàn)
select * from 表名 limit [offset,] rows
其中,limit后面可以跟兩個參數(shù),也可以跟一個參數(shù)。
跟一個參數(shù)表示rows,相當(dāng)于offset=0,從數(shù)據(jù)表中的第一條記錄開始查詢出rows條數(shù)據(jù)。
跟兩個參數(shù)的話,第一個是從0開始的偏移量,第二個參數(shù)表示想查詢出來的記錄數(shù)。
利用jqPaginator這個優(yōu)秀的jquery分頁插件編寫一個分頁條
注意:這個分頁是基于bootstrap3.1.1寫出來的
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" />
</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') {
//這里是點擊分頁的回調(diào)
}
}
});
</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('連接數(shù)據(jù)庫成功');
});
connection.query('select * from user limit ?, 5',
您可能感興趣的文章:- Django的分頁器實例(paginator)
- Django原生sql也能使用Paginator分頁的示例代碼
- bootstrap paginator分頁插件的兩種使用方式實例詳解
- 快速掌握jquery分頁插件jqPaginator的使用方法
- bootstrap paginator分頁前后臺用法示例
- 使用bootstrap-paginator.js 分頁來進(jìn)行ajax 異步分頁請求示例
- 基于vue實現(xiàn)分頁/翻頁組件paginator示例
- 根據(jù)Bootstrap Paginator改寫的js分頁插件
- Bootstrap分頁插件之Bootstrap Paginator實例詳解
- Bootstrap Paginator分頁插件使用方法詳解
- Bootstrap Paginator分頁插件與ajax相結(jié)合實現(xiàn)動態(tài)無刷新分頁效果
- Django使用paginator插件實現(xiàn)翻頁功能的實例
相關(guān)文章
jQuery不使用插件及swf實現(xiàn)無刷新文件上傳
這篇文章主要介紹了jQuery不使用插件及swf實現(xiàn)無刷新文件上傳,需要的朋友可以參考下2014-12-12
jQuery中通過ajax的get()函數(shù)讀取頁面的方法
這篇文章主要介紹了jQuery中通過ajax的get()函數(shù)讀取頁面的方法,需要的朋友可以參考下2016-02-02
jQuery實現(xiàn)瀏覽器之間跳轉(zhuǎn)并傳遞參數(shù)功能【支持中文字符】
這篇文章主要介紹了jQuery實現(xiàn)瀏覽器之間跳轉(zhuǎn)并傳遞參數(shù)功能,具有支持中文字符傳輸?shù)墓δ?涉及jQuery編碼轉(zhuǎn)換、事件響應(yīng)、頁面跳轉(zhuǎn)等相關(guān)操作技巧,需要的朋友可以參考下2018-03-03
jquery easyui dataGrid動態(tài)改變排序字段名的方法
jQuery easyui dataGrid 動態(tài)改變排序字段名,一般情況下,在使用的時候,我們會點擊相應(yīng)字段進(jìn)行排序。今天小編以java為例給大家講解問題原因及解決方案,需要的的朋友參考下2017-03-03
jquery Mobile入門—多頁面切換示例學(xué)習(xí)
在JQuery Mobile中,多個頁面的切換是通過<a>元素、并將<href>屬性設(shè)置為#+對應(yīng)的id號的方式進(jìn)行的2013-01-01
基于jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單
這篇文章主要介紹了jQuery實現(xiàn)火焰燈效果導(dǎo)航菜單的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-01-01
基于jquery的多彩百分比 動態(tài)進(jìn)度條 投票效果顯示效果實現(xiàn)代碼
基于jquery的多彩百分比 動態(tài)進(jìn)度條 投票效果顯示效果實現(xiàn)代碼,學(xué)習(xí)jquery的朋友可以參考下。2011-08-08

