Heim > Artikel > Web-Frontend > jq Paginator kombiniert mit Express, um einen Paging-Effekt zu erzielen

jq Paginator kombiniert mit Express, um einen Paging-Effekt zu erzielen

小云云Original: 2018-01-17 15:10:401716Durchsuche

Dieser Artikel stellt hauptsächlich die Wirkung von jqPaginator in Kombination mit Express vor, um Paging-Anzeigeinhalte zu erzielen. Ich hoffe, dass er jedem helfen kann.

Vorher geschrieben

Page-Content ist auch eine Anforderung, auf die wir bei der Seitenentwicklung häufig stoßen
Die Front-End-Seite wird mit dem JQuery-Plug-In jqPaginator geschrieben
Das Backend verwendet MySQL zum Speichern von Daten

Beginnen Sie mit der Eingabe des Codes

Überprüfen Sie die SQL-Kenntnisse

Lassen Sie uns zunächst die SQL-Anweisung überprüfen. Wir möchten nur bestimmte Elemente in der Datentabelle abfragen und Limit verwenden, um

select * from table name limit [offset,] rows

Auf den Grenzwert können zwei Parameter oder ein Parameter folgen.

Das Folgen eines Parameters zeigt Zeilen an, was Offset = 0 entspricht, und fragt Zeilendaten ab dem ersten Datensatz in der Datentabelle ab.
Bei zwei Parametern ist der erste der Offset beginnend bei 0 und der zweite Parameter gibt die Anzahl der Datensätze an, die Sie abfragen möchten.

Verwenden Sie jqPaginator, ein hervorragendes JQuery-Paging-Plug-In, um eine Paging-Leiste zu schreiben

Hinweis: Diese Paging-Funktion basiert auf 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>

Hier können wir ganz einfach die Paging-Buttons ausschreiben

Hintergrundcode

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

Verwandte Empfehlungen:

Einfache Implementierung von Ajax No-Refresh Paging-Effekt

Beispiel für PHP-Implementierung des Paging-Effekts

Detaillierte Erläuterung von Webpack+Express-Beispielen für die Entwicklung mehrseitiger Websites

Das obige ist der detaillierte Inhalt vonjq Paginator kombiniert mit Express, um einen Paging-Effekt zu erzielen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Analyse von drei Anwendungsbeispielen von Jquery-DatenNächster Artikel：Analyse von drei Anwendungsbeispielen von Jquery-Daten

In Verbindung stehende Artikel

Mehr sehen