>名稱example people年齡

1 jamie 43

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

composer require silex/silex>

：使用PDO建立數(shù)據(jù)庫連接（建議安全和可移植性）：index.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)
    );
};

>
1. 數(shù)據(jù)檢索：>根據(jù)頁碼和每頁行獲取數(shù)據(jù)子集。

$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);
});

2. 行計數(shù)：檢索行總數(shù)。

$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);
});

3. frontend：服務(wù)于HTML頁面。

$app->get('/', function () use ($app) {
    return file_get_contents(__DIR__.'/../resources/views/index.html');
});

> frontend（html＆jquery）：> 包括jQuery并創(chuàng)建用于分頁鏈接和數(shù)據(jù)的容器：>

> JavaScript函數(shù)：

<ul id="rows"></ul>
<ul id="page-numbers"></ul>
<??>

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++) {
            $('http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15bpage-numbers').append('<li><a href="http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15b'+count+'" onclick="getPage('+count+');">'+count+'</a></li>');
            count++;
        }
    });
}

function getPage(page_num) {
    $('http://ipnx.cn/link/93ac0c50dd620dc7b88e5fe05c70e15brows').html('');
    $.get('data/page/'+page_num+'/'+rows_per_page, function(data){
        $(data).each(function(){
            $('http://ipnx.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);
});

考慮：

>

• 對于非常大的數(shù)據(jù)集，請考慮更高級的數(shù)據(jù)庫優(yōu)化技術(shù)。
在前端和后端都實現(xiàn)強大的錯誤處理。
• >
探索非常大的數(shù)據(jù)集的服務(wù)器端分頁，以最大程度地減少數(shù)據(jù)庫加載。

>