與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中文網其他相關文章！