How to implement paging in php and js

With the continuous evolution of web applications and the increase in data volume, paging has become a necessary technical means. The implementation of paging is mainly divided into two methods: server side and client side. In this article, we will focus on how php and js implement paging.

1. Server-side paging

1. Basic principle

Server-side paging depends on the limit and offset settings of the SQL statement. Generally, we first get the total number of records and then calculate the total number of pages. Then, based on the current page number and the number of records displayed on each page, the limit and offset values of the current page are calculated, and the range of records to be obtained is specified in the SQL statement. Finally, the obtained records are returned to the browser for display.

2.php implementation

As a server-side language, php can be used to query data using mysql. The following is a sample code snippet:

connect_error){ die("Connection failed: " . $conn->connect_error); } $per_page = 10; // 每页显示10条记录 $page = isset($_GET['page']) ? $_GET['page'] : 1; // 获取当前页码，默认为第1页 $start = ($page - 1) * $per_page; // 计算当前页的起始记录号 $sql = "SELECT * FROM users LIMIT $start, $per_page"; $result = $conn->query($sql); if($result->num_rows > 0){ while($row = $result->fetch_assoc()){ echo $row['id'] . " " . $row['name'] . "
"; } } $conn->close(); echo "
"; // 分页导航 echo "
"; echo "第一页"; if($page > 1){ echo "上一页"; } if($page < $total_pages){ echo "下一页"; } echo "最后一页"; echo "
";

The above code implements obtaining user information from the mysql database, displays 10 records per page, and supports paging function. Among them, $per_page represents the number of records displayed on each page, $page represents the current page number, $start represents the starting record number of the current page, and $total_pages represents the total number of pages.

2. Client-side paging

1. Basic principle

Client-side paging refers to obtaining all records from the server to the browser at one time, and then using js for paging deal with. The specific implementation is as follows:

1) Load all data sources into js;

2) Calculate the total number of records and total pages;

3) Based on the current page number and the number of records displayed on each page, to calculate the data range that needs to be displayed on the current page;

4) Render the data and display it on the page;

5) Switch paging by clicking on the page number.

2.js implementation

js implementation of paging is mainly based on jQuery and Bootstrap frameworks. The following is a sample code for paging based on Bootstrap:

       
  
 
客户端分页示例
 
 
 
 
ID
 
姓名
 
年龄
 
地址
 
 
 
 
 
  
   

The above code demonstrates the use of the Bootstrap framework to implement client-side paging and uses simulated data sources for display.

Conclusion

Both server-side paging and client-side paging have their own advantages and disadvantages. For small-scale data sets, client-side paging can be used to reduce the load on the server. For large-scale data sets, server-side paging is more suitable. Therefore, it is necessary to choose the appropriate paging method according to the actual situation.

The above is the detailed content of How to implement paging in php and js. For more information, please follow other related articles on the PHP Chinese website!