Maison >interface Web >js tutoriel >jq Paginator combiné avec express pour obtenir un effet de pagination

jq Paginator combiné avec express pour obtenir un effet de pagination

小云云original: 2018-01-17 15:10:401763parcourir

Cet article présente principalement en détail l'effet de jqPaginator combiné avec express pour obtenir du contenu d'affichage de pagination. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Écrit avant

La pagination du contenu est également une exigence que nous rencontrons souvent dans le développement de pages
La page frontale est écrite à l'aide du plug-in jquery jqPaginator
Le backend utilise MySQL pour stocker les données

Commencez à taper le code

Révisez les connaissances SQL

Tout d'abord, passons en revue l'instruction SQL. Nous souhaitons uniquement interroger certains éléments de la table de données et utiliser limit pour implémenter

select * from table name limit [offset,] rows

Parmi eux, la limite peut être suivie de deux paramètres ou d'un seul paramètre.
Suivre un paramètre indique les lignes, ce qui équivaut à offset=0, interroge les données des lignes à partir du premier enregistrement de la table de données.
Avec deux paramètres, le premier est le décalage à partir de 0, et le deuxième paramètre indique le nombre d'enregistrements que vous souhaitez interroger.

Utilisez jqPaginator, un excellent plug-in de pagination jquery, pour écrire une barre de pagination

Remarque : cette pagination est écrite sur la base de 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>

Ici, nous pouvons facilement écrire les boutons de pagination

Code backend

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下一页阅读全文

Recommandations associées :

Mise en œuvre facile d'Ajax sans rafraîchissement effet de pagination

Exemple d'implémentation de l'effet de pagination par PHP

Explication détaillée des exemples de développement de sites multipages webpack+express

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse de trois exemples d'utilisation de Jquery-dataArticle suivant：Analyse de trois exemples d'utilisation de Jquery-data

Articles Liés

Voir plus