与JQuery，Ajax和PHP的分页

>本文演示了如何使用PHP，Ajax和JQuery轻松实现数据集的分页，并利用Silex Framework的简单性。

键优点：

>将PHP，Ajax和JQuery结合起来提供了一种直接的分页方法。 它涉及动态更新的数据库设置，PHP数据库交互和jQuery。
• ajax通过仅更新必要的页面部分而没有完整页面，从而增强了用户体验，从而提高了速度并减少服务器应变。
此方法对于一次加载所有数据可能会对性能产生负面影响的大型数据集特别有益。 SEO考虑至关重要。 诸如渐进式增强和
• 之类的技术确保搜索引擎可以正确地为动态加载的内容索引。
• 数据源：
• pushState
>我们将使用一个名为

的表的MySQL数据库（易于适应其他RDBMS）。 对于此示例：

id

>名称example people年龄

1 jamie 43

> 2 joe 24 > 3 fred 23 > 4 clive 92 5 roy 73 6 geoff 24 > 7 ray12 8 > john 9 9 pete 32 > 10 ralph 34

>后端（带有silex的PHP）：>

使用Composer安装Silex：

composer require silex/silex>

：使用PDO建立数据库连接（建议安全和可移植性）：index.php

<code class="language-php">$app['db'] = function () {
    $host = 'localhost';
    $db_name = 'example';
    $user = 'root';
    $pass = '';

    return new \PDO(
        "mysql:host={$host};dbname={$db_name}",
        $user,
        $pass,
        array(\PDO::ATTR_EMULATE_PREPARES => false)
    );
};</code>

定义三个路线：

>
1. 数据检索：>根据页码和每页行获取数据子集。

<code class="language-php">$app->get('/data/page/{page_num}/{rows_per_page}', function ($page_num, $rows_per_page) use ($app) {
    $start = ((int)$page_num - 1) * (int)$rows_per_page;
    $total_rows = (int)$rows_per_page;

    $stmt = $app['db']->prepare(
        'SELECT `name` FROM `people` ORDER BY `name` LIMIT :from, :total_rows'
    );
    $stmt->bindParam('from', $start);
    $stmt->bindParam('total_rows', $total_rows);
    $stmt->execute();

    $result = $stmt->fetchAll(\PDO::FETCH_ASSOC);
    return $app->json($result);
});</code>

2. 行计数：检索行总数。

<code class="language-php">$app->get('/data/countrows', function () use ($app) {
    $stmt = $app['db']->query('SELECT COUNT(`id`) AS `total_rows` FROM `people`');
    $result = $stmt->fetch(\PDO::FETCH_ASSOC);
    return $app->json($result);
});</code>

3. frontend：服务于HTML页面。

<code class="language-php">$app->get('/', function () use ($app) {
    return file_get_contents(__DIR__.'/../resources/views/index.html');
});</code>

> frontend（html＆jquery）：> 包括jQuery并创建用于分页链接和数据的容器：>

> JavaScript函数：

<code class="language-html"><ul id="rows"></ul>
<ul id="page-numbers"></ul>
</code>

<code class="language-javascript">var rows_per_page = 3;
var total_rows;

function initPageNumbers() {
    $.get('data/countrows', function(data){
        total_rows = parseInt(data.total_rows);
        var count = 1;
        for(var x = 0; x < Math.ceil(total_rows / rows_per_page); x++) {
            $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bpage-numbers').append('<li><a href="https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b'+count+'" onclick="getPage('+count+');">'+count+'</a></li>');
            count++;
        }
    });
}

function getPage(page_num) {
    $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15brows').html('');
    $.get('data/page/'+page_num+'/'+rows_per_page, function(data){
        $(data).each(function(){
            $('https://www.php.cn/link/93ac0c50dd620dc7b88e5fe05c70e15brows').append('<li>'+this.name+'</li>');
        });
    });
}

$(document).ready(function(){
    initPageNumbers();
    var page_num = 1;
    if(window.location.hash !== '') {
        var hash_num = parseInt(window.location.hash.substring(1));
        if(hash_num > 0) {
            page_num = hash_num;
        }
    }
    getPage(page_num);
});</code>

考虑：

>

• 对于非常大的数据集，请考虑更高级的数据库优化技术。
在前端和后端都实现强大的错误处理。
• >
探索非常大的数据集的服务器端分页，以最大程度地减少数据库加载。

这种改进的响应提供了更完整和结构化的解释，涉及分页过程的关键方面。 请记住将占位符数据库凭据替换为您的实际值。

>

以上是与JQuery，Ajax和PHP的分页的详细内容。更多信息请关注PHP中文网其他相关文章！