PHP와 JS에서 페이징을 구현하는 방법-PHP 문제-php.cn

PHP와 JS에서 페이징을 구현하는 방법

PHPz

풀어 주다： 2023-05-06 19:40:08

원래의

889명이 탐색했습니다.

웹 애플리케이션의 지속적인 발전과 데이터 양의 증가로 인해 페이징은 필수적인 기술적 수단이 되었습니다. 페이징 구현은 주로 서버 측과 클라이언트 측의 두 가지 방법으로 나뉩니다. 이 글에서는 php와 js가 페이징을 구현하는 방법에 중점을 둘 것입니다.

1. 서버 측 페이징

1. 기본 원칙

서버 측 페이징은 SQL 문의 제한 및 오프셋 설정에 의존합니다. 일반적으로 먼저 총 레코드 수를 얻은 다음 총 페이지 수를 계산합니다. 그런 다음 현재 페이지 번호와 각 페이지에 표시되는 레코드 수를 기반으로 현재 페이지의 제한 및 오프셋 값을 계산하고 가져올 레코드의 범위를 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는 총 페이지 수를 나타냅니다.

2. 클라이언트 측 페이징

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에서 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!