Home > Article > Web Front-end > jq Paginator combined with express to achieve paging effect
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 implementselect * from table name limit [offset,] rows
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('#pagination1', { totalPages: 100, visiblePages: 3, currentPage: 1, onPageChange: function (num, type) { if (type == 'change') { //这里是点击分页的回调 } } }); </script> </html>
Background code
router.get('/pages', function (req, res, next) { // res.json({"name": 123}); var page = req.query.page; var page = (--page)*5; var connection = mysql.createConnection({ host: '127.0.0.1', port: 3306, user: 'root', password: 'root', database: 'vr02' }); connection.connect(function(err) { if (err) { throw err; } console.log('连接数据库成功'); }); connection.query('select * from user limit ?, 5',当前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!