寫在前面的話
分頁展示內(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',
新聞熱點
疑難解答