jq Paginator combined with express to achieve paging effect-JS Tutorial-php.cn

jq Paginator combined with express to achieve paging effect

小云云

Release： 2018-01-17 15:10:40

Original

1732 people have browsed it

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>

Copy after login

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

Copy after login

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!