jq Paginator結合express實現分頁效果-js教程-PHP中文網

jq Paginator結合express實現分頁效果

小云云

發布： 2018-01-17 15:10:40

原創

1753 人瀏覽過

本文主要為大家詳細介紹了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>
 <p style="text-align: center;">
  <ul class="pagination" id="pagination1"></ul>
 </p>
 
 </body>
 <script src="/javascripts/jquery.min.js"></script>
 <script src="/javascripts/jqPaginator.js"></script>
 <script>
 $.jqPaginator(&#39;#pagination1&#39;, {
  totalPages: 100,
  visiblePages: 3,
  currentPage: 1,
  onPageChange: function (num, type) {
   if (type == &#39;change&#39;) {
     //这里是点击分页的回调
   }
  }
 });
 

 </script>
</html>

登入後複製

這裡我們可以方便的把分頁按鈕寫出來

後台程式碼

router.get(&#39;/pages&#39;, function (req, res, next) {
  // res.json({"name": 123});
  var page = req.query.page;
  var page = (--page)*5;
  var connection = mysql.createConnection({
    host: &#39;127.0.0.1&#39;,
    port: 3306,
    user: &#39;root&#39;,
    password: &#39;root&#39;,
    database: &#39;vr02&#39;
  });
  connection.connect(function(err) {
    if (err) {
      throw err;
    }
    console.log(&#39;连接数据库成功&#39;);
  });
  connection.query(&#39;select * from user limit ?, 5&#39;,当前1/2页 12下一页阅读全文

登入後複製