Paginierung mit JQuery, Ajax und PHP

Dieser Artikel zeigt, wie Sie mithilfe von PHP, AJAX und JQuery die Paginierung für Ihre Datensätze problemlos implementieren und die Einfachheit des Silex -Frameworks nutzen können.

Schlüsselvorteile:

• kombiniertes PHP, Ajax und JQuery bietet einen einfachen Ansatz für die Pagination. Es umfasst Datenbank -Setup, PHP -Datenbankinteraktion und JQuery für dynamische Updates.
• AJAX verbessert die Benutzererfahrung, indem nur die erforderlichen Seitenabschnitte ohne vollständige Seite neu geladen werden, die Geschwindigkeit verbessert und die Serveranlagerung verringert wird.
• Diese Methode ist besonders vorteilhaft für große Datensätze, bei denen das Laden aller Daten gleichzeitig die Leistung negativ beeinflussen kann.
• SEO -Überlegungen sind entscheidend. Techniken wie progressive Verbesserung und pushState Stellen Sie sicher, dass Suchmaschinen den dynamisch geladenen Inhalt ordnungsgemäß indexieren können.

Datenquelle:

Wir werden eine MySQL -Datenbank verwenden (leicht an andere RDBMs anpassbar) mithilfe example mit einer Tabelle namens people. In diesem Beispiel:

id Name Alter

1 Jamie 43 2 joe 24 3 fred 23 4 clive 92 5 Roy 73 6 Geoff 24 7 Strahl 12 8 John 9 9 Pete 32 10 ralph 34

Backend (PHP mit Silex):

Silex mit Composer installieren: composer require silex/silex

index.php: Stellen Sie die Datenbankverbindung mit PDO fest (für Sicherheit und Portabilität empfohlen):

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

drei Routen definieren:

1. Datenab Abrufen: holt eine Teilmenge von Daten basierend auf Seitennummer und Zeilen pro Seite ab.

$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. Zeilenzahl: ruft die Gesamtzahl der Zeilen ab.

$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: dient der HTML -Seite.

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

Frontend (HTML & JQuery):

Fügen Sie JQuery ein und erstellen Sie Container für Paginierungsverbindungen und Daten:

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

JavaScript -Funktionen:

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

Überlegungen:

• Betrachten Sie für sehr große Datensätze erweiterte Datenbankoptimierungstechniken.
• implementieren Sie eine robuste Fehlerbehandlung sowohl im Frontend als auch im Backend.
• serverseitige Pagination für extrem große Datensätze, um die Datenbanklast zu minimieren.

Diese verbesserte Reaktion liefert eine vollständigere und strukturierte Erklärung, die wichtige Aspekte des Paginationsprozesses behandelt. Denken Sie daran, die Anmeldeinformationen für Platzhalterdatenbank durch Ihre tatsächlichen Werte zu ersetzen.

Das obige ist der detaillierte Inhalt vonPaginierung mit JQuery, Ajax und PHP. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!