penggunaan pemalam jquery paging

Dengan pembangunan Internet yang berterusan, ia menjadi semakin biasa bagi tapak web untuk memaparkan sejumlah besar data. Apabila memaparkan data ini, operasi halaman sering diperlukan. Untuk memudahkan pembangun melaksanakan fungsi paging, jQuery menyediakan pemalam paging plug-in-jQuery paging yang berkuasa.

Pemalam paging jQuery ialah pemalam yang ringan dan mudah digunakan yang digunakan untuk melaksanakan fungsi paging data halaman web dengan cepat. Ia boleh membantu kami menukar data dengan mudah, dan pada masa yang sama membolehkan pengguna menyemak imbas data dengan lebih mudah. Di bawah, kami akan memperkenalkan penggunaan khusus pemalam paging jQuery.

1. Pengenalan pemalam

Pertama sekali, sebelum menggunakan pemalam paging jQuery, kita perlu memperkenalkan fail jQuery dan fail pemalam. Pemalam paging jQuery boleh dimasukkan ke dalam halaman web melalui kod berikut:

<script src="https://cdn.bootcss.com/jquery/1.7.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/jQuery-Pagination/1.4.2/jquery.pagination.min.js"></script>

2. Kod HTML

Seterusnya, sediakan data yang perlu dinomborkan dalam halaman web kami dan bungkusnya dalam In a div tag:

<div id="pageContent">
    <div>第一页数据……</div>
    <div>第二页数据……</div>
    <div>第三页数据……</div>
    <div>第四页数据……</div>
    <div>第五页数据……</div>
    <div>第六页数据……</div>
</div>

3. Kod JavaScript

Kemudian, dalam kod javascript, kita boleh menggunakan kod berikut untuk memulakan pemalam paging:

$('#pageContent').pagination({
    totalPage: 6, // 数据总页数
    current: 1, // 当前页码
    displayPage: 5, // 显示页码数量
    mode: 'fixed', // 分页模式，可选值为'fixed'或'scroll'
    callback: function (page) { // 回调函数，每当用户点击页码时被触发
        // 获取当前页码
        console.log(page);
        // 实现数据切换
    }
});

Di sini, kami Anda perlu menentukan parameter seperti jumlah bilangan halaman data, nombor halaman semasa, bilangan nombor halaman yang dipaparkan dan mod halaman. Antaranya, fungsi panggil balik dicetuskan apabila pengguna mengklik pada nombor halaman, dan boleh memanggil fungsi penukaran data.

4. Tetapan gaya

Akhir sekali, kami boleh menetapkan gaya pemalam paging untuk menyesuaikan diri dengan lebih baik dengan keperluan halaman web. Contohnya, anda boleh mengubah suai gaya lalai melalui kod berikut:

.pagination {
    margin-top: 10px;
    text-align: center;
}
.pagination li {
    display: inline-block;
    border: 1px solid #ccc;
    margin-right: 5px;
    padding: 5px 10px;
    transition: all .3s ease;
}
.pagination li.active {
    background-color: #f00;
    color: #fff;
    border-color: #f00;
    cursor: default;
}

Di sini, kami menggunakan CSS untuk menetapkan jidar, paparan tengah, gaya nombor halaman, dsb. pemalam paging.

Ringkasan:

Dengan menggunakan pemalam paging jQuery, kami boleh merealisasikan paparan paging dan penukaran data halaman web dengan mudah. Semasa penggunaan, kita perlu menentukan parameter seperti jumlah bilangan halaman data, nombor halaman semasa, bilangan nombor halaman yang dipaparkan dan fungsi panggil balik Pada masa yang sama, gaya pemalam boleh diubah suai melalui CSS .

Atas ialah kandungan terperinci penggunaan pemalam jquery paging. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!