Penomboran dengan jQuery, ajax dan php

Artikel ini menunjukkan bagaimana untuk melaksanakan penomboran dengan mudah untuk dataset anda menggunakan PHP, Ajax, dan JQuery, memanfaatkan kesederhanaan kerangka Silex.

Kelebihan utama:

Menggabungkan PHP, Ajax, dan JQuery menawarkan pendekatan mudah untuk penomboran. Ia melibatkan persediaan pangkalan data, interaksi pangkalan data PHP, dan jQuery untuk kemas kini dinamik.
Ajax meningkatkan pengalaman pengguna dengan mengemas kini bahagian halaman yang diperlukan tanpa tambah nilai halaman penuh, meningkatkan kelajuan dan mengurangkan ketegangan pelayan.
Kaedah ini sangat bermanfaat untuk dataset besar di mana memuat semua data sekaligus boleh memberi kesan negatif terhadap prestasi.
pertimbangan SEO adalah penting. Teknik seperti peningkatan progresif dan
• memastikan enjin carian dapat mengindeks kandungan yang dimuat secara dinamik. pushState

Sumber data:

Kami akan menggunakan pangkalan data MySQL (mudah disesuaikan dengan RDBMS lain) bernama

dengan jadual yang dipanggil example. Untuk contoh ini: people

id Nama usia

1 Jamie 43 2 Joe 24 3 fred 23 4 Clive 92 5 roy 73 6 geoff 24 7 ray 12 8 John 9 9 Pete 32 10 ralph 34 backend (php dengan silex):

Pasang silex menggunakan komposer:

composer require silex/silex: Menetapkan sambungan pangkalan data menggunakan PDO (disyorkan untuk keselamatan dan mudah alih):

index.php Tentukan tiga laluan:

<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>

Pengambilan data: mengambil subset data berdasarkan nombor halaman dan baris setiap halaman.

kiraan baris:

<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>

mengambil jumlah bilangan baris.

frontend:

<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>

melayani halaman html.

frontend (html & jQuery):

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

Sertakan jQuery dan buat kontena untuk pautan penomboran dan data:

fungsi 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>

Pertimbangan:

• Untuk dataset yang sangat besar, pertimbangkan teknik pengoptimuman pangkalan data yang lebih maju.
• Melaksanakan pengendalian ralat yang mantap di kedua -dua frontend dan backend.
• meneroka penomboran sisi pelayan untuk dataset yang sangat besar untuk meminimumkan beban pangkalan data.

Sambutan yang lebih baik ini memberikan penjelasan yang lebih lengkap dan berstruktur, menangani aspek utama proses penomboran. Ingatlah untuk menggantikan kelayakan pangkalan data letak dengan nilai sebenar anda.

Atas ialah kandungan terperinci Penomboran dengan jQuery, ajax dan php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!