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

發(fā)布時(shí)間：2020-09-12 19:56:02 來源：腳本之家閱讀：132 作者：靳劉杰欄目：web開發(fā)

寫在前面的話

分頁展示內(nèi)容也是我們?cè)陧撁骈_發(fā)中經(jīng)常會(huì)遇到的需求
前端頁面利用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分頁插件編寫一個(gè)分頁條

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

 </script>
</html>

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

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

后臺(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ù)庫成功');
  });
  connection.query('select * from user limit ?, 5',
                        12下一頁閱讀全文

向AI問一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽