随着web应用程序的不断演变和数据量的增加，分页成为了一种必备的技术手段。分页的实现主要分为服务器端和客户端两种方式。在本文中，我们将着重介绍php和js如何实现分页。
一、服务器端分页
1.基本原理
服务器端分页依赖于sql语句的limit和offset设置。一般情况下，我们首先要获取总记录数，然后计算出总页数。然后，根据当前页码和每页显示记录数，计算出当前页的limit和offset值，从而在sql语句中指定需要获取的记录范围。最后，将获取的记录返回给浏览器进行展示。
2.php实现
php作为一种服务器端语言，可以使用mysql查询获取数据。下面是一个示例代码片段：
<?php$host = 'localhost';$username = 'root';$password = 'password';$database = 'test';$conn = new mysqli($host, $username, $password, $database);if($conn->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'] . <br>; }}$conn->close();echo <br>;// 分页导航echo <div class='pagination'>;echo <a href='?page=1'>第一页</a>;if($page > 1){ echo <a href='?page=".($page-1)."'>上一页</a>;}if($page < $total_pages){ echo "<a href='?page=".($page+1)."'>下一页</a>;}echo <a href='?page=".$total_pages."'>最后一页</a>;echo </div>;
以上代码实现了从mysql数据库中获取用户信息，每页显示10条记录，支持分页功能。其中，$per_page表示每页显示的记录数，$page表示当前页码，$start表示当前页的起始记录号，$total_pages表示总页数。
二、客户端分页
1.基本原理
客户端分页是指将所有记录一次性从服务器获取到浏览器端，然后使用js进行分页处理。具体实现方式如下：
1）将所有数据源加载到js中；
2）计算总记录数和总页数；
3）根据当前页码和每页显示记录数，计算出当前页需要显示的数据范围；
4）渲染数据并显示在页面上；
5）通过点击页码切换分页。
2.js实现
js实现分页主要是基于jquery和bootstrap框架。下面是一个基于bootstrap的分页示例代码：
<!doctype html><html><head> <title>客户端分页示例</title> <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script></head><body> <div class="container"> <h3>客户端分页示例</h3> <table class="table table-bordered table-hover" id="tbldata"> <thead> <tr> <th>id</th> <th>姓名</th> <th>年龄</th> <th>地址</th> </tr> </thead> <tbody id="tblbody"> </tbody> </table> <nav> <ul class="pagination" id="pagination"> </ul> </nav> </div> <script> $(function(){ // 模拟数据源 var data = [ {id:1, name:张三, age:20, address:北京}, {id:2, name:李四, age:22, address:上海}, {id:3, name:王五, age:25, address:广州}, {id:4, name:赵六, age:28, address:深圳}, {id:5, name:周七, age:30, address:杭州}, {id:6, name:吴八, age:35, address:南京}, {id:7, name:钱九, age:40, address:西安}, {id:8, name:孙十, age:45, address:重庆}, {id:9, name:郑十一, age:50, address:成都}, {id:10, name:冯十二, age:55, address:武汉} ]; var per_page = 5; // 每页显示5条记录 var total = data.length; // 记录总数 var total_pages = math.ceil(total / per_page); // 计算总页数 // 初始化页码 for(var i = 1; i <= total_pages; i++){ var li = "<li><a href='#' onclick='changepage(" + i + ")'> + i + </a></li>; $(#pagination).append(li); } // 默认显示第一页 showdata(1); // 根据页码显示数据 function showdata(page){ var start = (page - 1) * per_page; var end = start + per_page; var html = ; for(var i = start; i < end; i++){ var item = data[i]; if(item){ html += <tr><td> + item.id + </td><td> + item.name + </td><td> + item.age + </td><td> + item.address + </td></tr>; } } $(#tblbody).html(html); } // 切换页码 window.changepage = function(page){ showdata(page); $(#pagination li).removeclass(active); $(#pagination li:nth-child( + (page+1) + )).addclass(active); } }); </script></body></html>
以上代码演示了使用bootstrap框架实现客户端分页，并使用模拟数据源进行展示。
结论
服务器端分页和客户端分页都具有各自的优点和缺点。对于小规模数据集，可以使用客户端分页，可以减轻服务器负担。而对于大规模数据集，服务器端分页更为适合。因此，需要根据实际情况选择合适的分页方式。
以上就是php和js如何实现分页的详细内容。