快捷導(dǎo)航

jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果第1/2頁(yè)

更新時(shí)間：2017年04月17日 08:55:35 作者：靳劉杰

這篇文章主要為大家詳細(xì)介紹了jqPaginator結(jié)合express實(shí)現(xiàn)分頁(yè)展示內(nèi)容效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

寫在前面的話

分頁(yè)展示內(nèi)容也是我們?cè)陧?yè)面開發(fā)中經(jīng)常會(huì)遇到的需求
前端頁(yè)面利用jqPaginator這個(gè)jquery插件來編寫
后端利用mysql存儲(chǔ)數(shù)據(jù)

開始敲代碼

回顧sql知識(shí)

首先讓我們回顧一下sql語句，我們只想查詢出數(shù)據(jù)表里的某幾條用limit實(shí)現(xiàn)

select * from 表名 limit [offset,] rows

其中，limit后面可以跟兩個(gè)參數(shù)，也可以跟一個(gè)參數(shù)。
跟一個(gè)參數(shù)表示rows，相當(dāng)于offset=0,從數(shù)據(jù)表中的第一條記錄開始查詢出rows條數(shù)據(jù)。
跟兩個(gè)參數(shù)的話，第一個(gè)是從0開始的偏移量，第二個(gè)參數(shù)表示想查詢出來的記錄數(shù)。

利用jqPaginator這個(gè)優(yōu)秀的jquery分頁(yè)插件編寫一個(gè)分頁(yè)條

注意：這個(gè)分頁(yè)是基于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ǎn)擊分頁(yè)的回調(diào)
   }
  }
 });
 

 </script>
</html>

這里我們可以方便的把分頁(yè)按鈕寫出來

后臺(tái)代碼

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ù)庫(kù)成功');
  });
  connection.query('select * from user limit ?, 5',
                            12下一頁(yè)閱讀全文
                            
                                您可能感興趣的文章:Django的分頁(yè)器實(shí)例(paginator)
Django原生sql也能使用Paginator分頁(yè)的示例代碼
bootstrap paginator分頁(yè)插件的兩種使用方式實(shí)例詳解
快速掌握jquery分頁(yè)插件jqPaginator的使用方法
bootstrap paginator分頁(yè)前后臺(tái)用法示例
使用bootstrap-paginator.js 分頁(yè)來進(jìn)行ajax 異步分頁(yè)請(qǐng)求示例
基于vue實(shí)現(xiàn)分頁(yè)/翻頁(yè)組件paginator示例
根據(jù)Bootstrap Paginator改寫的js分頁(yè)插件
Bootstrap分頁(yè)插件之Bootstrap Paginator實(shí)例詳解
Bootstrap Paginator分頁(yè)插件使用方法詳解
Bootstrap Paginator分頁(yè)插件與ajax相結(jié)合實(shí)現(xiàn)動(dòng)態(tài)無刷新分頁(yè)效果
Django使用paginator插件實(shí)現(xiàn)翻頁(yè)功能的實(shí)例