Home > Article > Web Front-end > jq Paginator combined with express to achieve paging effect

jq Paginator combined with express to achieve paging effect

小云云Original: 2018-01-17 15:10:401706browse

This article mainly introduces in detail the effect of jqPaginator combined with express to achieve paging display content. It has certain reference value. Interested friends can refer to it. I hope it can help everyone.

Written in front

Pagination display content is also a requirement we often encounter in page development
The front-end page is written using the jquery plug-in jqPaginator
The backend uses mysql to store data

Start typing code

##Review sql knowledge

First, let us review the sql statement. We only want to query certain rows in the data table and use limit to implement

select * from table name limit [offset,] rows

Among them, limit can be followed by two parameters or one parameter.

Following a parameter indicates rows, which is equivalent to offset=0. Query rows data starting from the first record in the data table.
With two parameters, the first one is the offset starting from 0, and the second parameter indicates the number of records you want to query.

Use jqPaginator, an excellent jquery paging plug-in, to write a paging bar

Note: This paging is written based on 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>

Here we can easily write out the paging buttons

Background code

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

Related recommendations:

Simple implementation of Ajax non-refresh paging effect

Example of php to achieve paging effect

Detailed explanation of webpack+express multi-page site development example

The above is the detailed content of jq Paginator combined with express to achieve paging effect. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Analysis of three usage examples of Jquery-dataNext article：Analysis of three usage examples of Jquery-data

See more

jq Paginator combined with express to achieve paging effect

Related articles