ホームページ > 記事 > ウェブフロントエンド > jq Paginator と Express を組み合わせてページング効果を実現

jq Paginator と Express を組み合わせてページング効果を実現

小云云オリジナル: 2018-01-17 15:10:401734ブラウズ

この記事では、jqPaginator と Express を組み合わせたページング表示コンテンツの効果について詳しく紹介します。興味のある方はぜひ参考にしてください。

前に書きました

コンテンツのページングは、ページ開発でよく遭遇する要件でもあります
フロントエンドページは、jqueryプラグインjqPaginatorを使用して作成されます
バックエンドはmysqlを使用してデータを保存します

入力を開始コード

SQL の知識を復習してください

まず、SQL ステートメントを復習しましょう。データテーブル内の特定の項目のみをクエリし、limit を使用して

select * from table name limit [offset] を実装します。 ,] rows

その中で、limit の後には 2 つのパラメータまたは 1 つのパラメータを続けることができます。
行を示すパラメータが続きます。これは offset=0 に相当し、データテーブルの最初のレコードから始まる行データをクエリします。
2 つのパラメーターを使用すると、最初のパラメーターは 0 から始まるオフセットであり、2 番目のパラメーターはクエリするレコードの数を示します。

優れた jquery ページングプラグインである jqPaginator を使用して、ページングストリップを作成します

注: このページングは 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下一页阅读全文

jq Paginator と Express を組み合わせてページング効果を実現

関連記事