Contoh pagination bootstrap di PHP

Terakhir diedit oleh Vinci pada 21 Juni 2022.

Bootstrap memudahkan untuk membangun komponen antarmuka pengguna internal. Di sini kita mengimplementasikan pagination Bootstrap dalam sebuah proyek.

Pagination adalah komponen penting dari halaman web yang mencantumkan sejumlah besar data. Kiat tentang bagaimana pagination PHP membantu menavigasi di antara halaman hasil yang dikategorikan.

Contoh cepat

Lihat contoh ini untuk pagination bootstrap statis HTML. Mengetahui struktur ini, memuat dan membuka kunci hasil dinamis itu sederhana.

<html>
<head>
<title>Quick example - Bootstrap pagination</title>
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
</head>
<body>
<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item active"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>
</body>
</html>

Sukai tautan pagination

Tautan pagination bootstrap

Bootstrap pagination di PHP dengan database

Jika Anda mencari skrip pagination Bootstrap dengan database PHP dan MySQL, mulailah. Pada artikel ini, kita akan mengimplementasikan pagination PHP dengan Bootstrap.

Database digunakan untuk membaca hasil halaman. Kemudian menggunakan navigasi halaman demi halaman untuk mengaktifkan Bootstrap Navigasi Link Contoh ini menyediakan pagination dengan atau tanpa link sebelumnya dan selanjutnya.

Menggunakan URL CDN yang direkomendasikan untuk memuat Bootstrap CSS untuk komponen pagination.

Ikuti langkah-langkah di bawah ini untuk menambahkan pagination ke daftar di PHP.

  1. Buat struktur database dan muat data sampel.
  2. Konfigurasikan dan petakan hasil database ke komponen pagination.
  3. Untuk membuat tautan pagination, hitung variabel seperti awal, batas, dan nomor halaman saat ini.
  4. Sorot halaman saat ini dan tautan pagination yang dapat diklik.

Struktur file

Gambar berikut menunjukkan struktur sampel file pagination Bootstrap. Ini menunjukkan cara yang jelas untuk membangun komponen pagination di PHP. Struktur sederhana ini memudahkan peserta didik untuk memahami alur kode.

Skrip basis data

Script berikut digunakan untuk menambahkan data ke database. Masukkan SQL ini untuk memiliki struktur tabel dan data sampel. Saat menjalankan contoh ini membantu untuk melihat hasil pagination di layar.

struktur.sql

--
-- Database: `bootstrap_pagination`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_product`
--

CREATE TABLE `tbl_product` (
  `id` int(11) NOT NULL,
  `product_name` varchar(255) NOT NULL,
  `price` varchar(255) NOT NULL,
  `model` varchar(255) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_product`
--

INSERT INTO `tbl_product` (`id`, `product_name`, `price`, `model`) VALUES
(1, 'GIZMORE Multimedia Speaker with Remote Control, Black', '€15.72', '2020'),
(2, 'Black Google Nest Mini', '€41.11', '2021'),
(3, 'Black Digital Hand Band, Packaging Type: Box', '€21.77', '2019'),
(4, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '€356.59', '2021'),
(5, 'JBL Airpods', '€27.81', '2020'),
(6, 'Black Google Nest Mini', '€41.11', '2021'),
(7, 'Black Digital Hand Band, Packaging Type: Box', '€21.77', '2019'),
(8, 'Lenovo IdeaPad 3 Intel Celeron N4020 14\'\' HD ', '€356.59', '2021'),
(9, 'Dell New Inspiron 3515 Laptop', '€537.48', '2021');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_product`
--
ALTER TABLE `tbl_product`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_product`
--
ALTER TABLE `tbl_product`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=11;

Desain halaman HTML dengan gaya bootstrap

Halaman HTML ini menampilkan hasil database dengan bilah navigasi pagination Bootstrap. Itu tidak mengandung CSS eksternal. Desain ini sepenuhnya bergantung pada Bootstrap CSS.

Model ini menghubungkan PHP untuk mengambil hasil database. HTML ini memiliki loop PHP bawaan untuk menduplikasi hasil. Memperlihatkan hasil database dalam tampilan tabular dengan jumlah baris terbatas yang dikonfigurasi.

Menampilkan menu tarik-turun untuk memilih gaya pagination. Contoh ini menyediakan dua jenis bilah navigasi pagination dengan atau tanpa tautan berikutnya sebelumnya.

Tautan halaman dan jenis gaya dipindahkan ke URL halaman. Parameter ini digunakan untuk membuat bilah navigasi bootstrap menggunakan Umumphp mengajukan.

index.php

<?php
namespace Phppot;

use Phppot\DataSource;
require_once __DIR__ . '/lib/Question.php';
$question = new Question();
$result = $question->getAllProducts();
?>
<html>
<head>
<title>Product</title>
<meta charset="utf-8">
<meta name="viewport"
    content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
    rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
    crossorigin="anonymous">
<script src="assets/js/product.js"></script>
</head>
<body>
    <div class="container">
        <div class="container pt-5">
            <h2 class="text-center heading py-3">Bootstrap Pagination</h2>
            <table class="table table-bordered" id="table">
                <tr>
                    <th>SL.No</th>
                    <th>Product Name</th>
                    <th class="text-end">Price</th>
                    <th>Model</th>
                </tr>
           <?php
        $questions = $result;
        if (is_array($questions)) {
            for ($i = 0; $i < count($questions) - 1; $i ++) {
                ?>
        <tr>
                    <td><?php echo $questions[$i]["id"];?></td>
                    <td><?php echo $questions[$i]["product_name"];?></td>
                    <td class="text-end"><?php echo $questions[$i]["price"];?></td>
                    <td><?php echo $questions[$i]["model"];?></td>
                </tr>
            <?php }}?>
        </table>
        </div>
    </div>
    <div class="container">
        <div class="container py-3">
            <div class="row">
                <div class="col-md-3 text-left">
                    <select class="form-select d-inline-block"
                        name="navyOp" id="select"
                        onchange="change_url(this.value);">
                        <option value="">Bootstrap Pagination Style</option>
                        <option value="prev-next-link"
                            <?php
                            if (! empty($_GET['type']) && $_GET['type'] == "prev-next-link") {
                                echo "selected";
                            }
                            ?>>With previous next</option>
                        <option value="number-link"
                            <?php
                            if (! empty($_GET['type']) && $_GET['type'] == "number-link") {
                                echo "selected";
                            }
                            ?>>With numbers</option>
                    </select>
                </div>
                <div class="col-md-9 text-right">
                    <nav aria-label="Page navigation example">
                        <ul class="pagination float-end "
                            id="previous-next">
    <?php echo $result["perpage"];?>
            </ul>
                    </nav>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

Kirim gaya pagination melalui javascript

Ini adalah fungsi JavaScript sederhana untuk mentransfer gaya halaman yang dipilih ke URL. Mengubah nilai popup dengan memanggil JavaScript ubah_url() Dengan melewati gaya yang dipilih

aset / js / produk.js

function change_url(val) {
	window.location.href = "https://phppot.com/bootstrap/bootstrap-pagination/index.php?type=" + val;
}

Menampilkan hasil pagination melalui PHP

Ini adalah kelas model PHP yang berisi fungsi untuk hasil paging.

partikel untuk objek langsung dapatkanSemuaProduk () Fungsi ini pertama kali dipanggil untuk menyiapkan kueri SQL. Menetapkan parameter awal dan akhir dari pagination untuk kueri.

Menggunakan batas setiap halaman file konfigurasi. Menghitung titik awal menggunakan nomor halaman saat ini dari string pencarian URL.

Menyiapkan parameter yang digunakan untuk menampilkan pagination bootstrap di browser. mereka,

  1. Jumlah total catatan – untuk menghitung jumlah halaman untuk membuat tautan.
  2. Batas per halaman – seperti yang dikonfigurasi dalam file konfigurasi untuk mengatur batas loop pagination.
  3. Base URL – Untuk mengatur URL dasar dengan string pencarian untuk menambahkan parameter pagination.

Dengan parameter tinggi dapatkanSemuaProduk () Fungsi panggilan halaman pamer () Performa di Umum.php.

Pertanyaan.php

<?php
namespace Phppot;

use Phppot\DataSource;
use Phppot\Common;
use Phppot\Config;

class Question
{

    private $conn;

    function __construct()
    {
        require_once 'DataSource.php';
        require_once 'Common.php';
        require_once 'Config.php';

        $this-&gt;conn = new DataSource();
        $this-&gt;common = new Common();
        $this-&gt;config = new Config();
    }

    public function getAllProducts()
    {
        $sql = &quot;SELECT * FROM tbl_product&quot;;
        $perpage = $this-&gt;config::PER_PAGE_LIMIT;
        $currentPage = 1;
        if (isset($_GET['pageNumber'])) {
            $currentPage = $_GET['pageNumber'];
        }
        $startPage = ($currentPage - 1) * $perpage;
        $href = &quot;index.php?&quot;;
        if (! empty($_GET['type']) &amp;&amp; $_GET['type'] == &quot;prev-next-link&quot;) {
            $href = $href . &quot;type=prev-next-link&amp;&quot;;
        } else {
            $href = $href . &quot;type=number-link&amp;&quot;;
        }
        if ($startPage &lt; 0) {
            $startPage = 0;
        }
        $query = $sql . &quot; limit &quot; . $startPage . &quot;,&quot; . $perpage;
        $result = $this-&gt;conn-&gt;select($query);
        if (! empty($result)) {
            $count = $this-&gt;conn-&gt;getRecordCount($sql);
            $result[&quot;perpage&quot;] = $this-&gt;common-&gt;showperpage($count, $perpage, $href);
        }
        return $result;
    }
}
?>

Konfigurasi aplikasi

File ini mendefinisikan konfigurasi tetap untuk menetapkan batas pada setiap halaman. Ini untuk memiliki batas yang sama untuk menampilkan jumlah catatan di seluruh program.

config.php

<?php	 
 namespace Phppot;	 
 class Config	 
 {	 
     const PER_PAGE_LIMIT = '2';	 
 }	 
 ?>

Buat tautan pagination bootstrap dalam HTML menggunakan PHP

Ini Umum Kelas PHP menyertakan fungsi yang terkait dengan pagination Bootstrap.

Menyiapkan daftar tautan pagination yang tidak teratur dalam wadah navigasi Bootstrap.

partikel untuk objek langsung halaman () Menerima fungsi $ hitungkan $ per halaman Dan $ href komponen. menggunakan $ href Menerima halaman saat ini sebagai URL dasar dari string kueri.

Menyiapkan URL pagination dengan menghubungkan URL dasar dan parameter paging.

Jika profil loop pagination menunjuk ke halaman saat ini, tidak ada tautan yang akan diberikan ke instance tertentu itu. Ini juga menyoroti contoh untuk menandai sebagai halaman aktif.

Menampilkan tautan sebelumnya dan berikutnya secara kondisional. Taruhan ini didasarkan pada opsi gaya UI pagination Bootstrap yang dipilih dari menu tarik-turun.

Contoh ini berisi tautan pagination yang dipersingkat. Bahkan jika ada lebih banyak halaman, itu membantu untuk terlihat bagus. Mencegah pengguliran atau puntiran horizontal.

Umum.php

<?php
namespace Phppot;

use Phppot\Config;

class Common
{

    private $conn;

    function __construct()
    {
        require_once 'DataSource.php';
        require_once 'Config.php';
        $this->conn = new DataSource();
        $this->config = new Config();
    }

    function pagination($count, $perpage, $href)
    {
        $output="";
        $perpage = $this->config::PER_PAGE_LIMIT;
        $srOnly = "visually-hidden";
        if (! empty($_GET['type']) && $_GET['type'] == "prev-next-link") {
            $srOnly = "";
        }
        if (! isset($_REQUEST["pageNumber"]))
            $_REQUEST["pageNumber"] = 1;

        if ($perpage != 0)
            $pages = ceil($count / $perpage);

        // if pages exists after loop's lower limit
        if ($pages > 1) {
            if ($_REQUEST["pageNumber"] > 1) {
                $previousPage = $_REQUEST["pageNumber"] - 1;
                $output = $output . '<li class="page-item  ' . $srOnly . '"><a href="' . $href . 'pageNumber=" . $previousPage . ""class="page-link text-dark">Previous</a></li>';
            } else {
                $output = $output . '<li class="page-item  ' . $srOnly . '" disabled><a href=""class="page-link text-dark">Previous</a></li>';
            }

            if (($_REQUEST["pageNumber"] - 3) > 0) {
                $output = $output . '<li class="page-item "><a href="' . $href . 'pageNumber=1" class="page-link text-dark">1</a></li>';
            }
            if (($_REQUEST["pageNumber"] - 3) > 1) {
                $output = $output . '<span class="mx-1">...</span>';
            }

            // Loop for provides links for 2 pages before and after current page
            for ($i = ($_REQUEST["pageNumber"] - 2); $i <= ($_REQUEST["pageNumber"] + 2); $i ++) {
                if ($i < 1)
                    continue;
                if ($i > $pages)
                    break;
                if ($_REQUEST["pageNumber"] == $i)
                    $output = $output . '<li class="page-item active"><a class="page-link" id=' . $i . '>' . $i . '</a></li>';
                else
                    $output = $output . '<li class="page-item"><a href="' . $href . "pageNumber=" . $i . '" class="page-link text-dark">' . $i . '</a></li>';
            }

            // if pages exists after loop's upper limit
            if (($pages - ($_REQUEST["pageNumber"] + 2)) > 1) {
                $output = $output . '<span class="mx-1">...</span>';
            }
            if (($pages - ($_REQUEST["pageNumber"] + 2)) > 0) {
                if ($_REQUEST["pageNumber"] == $pages)
                    $output = $output . '<li class="page-item"><a id=' . ($pages) . ' class="page-link text-dark">' . ($pages) . '</a></li>';
                else
                    $output = $output . '<li class="page-item"><a href="' . $href . "pageNumber=" . ($pages) . '" class="page-link text-dark">' . ($pages) . '</a></li>';
            }

            if ($_REQUEST["pageNumber"] < $pages) {
                $nextPage = $_REQUEST["pageNumber"] + 1;
                $output = $output . '<li class="page-item   ' . $srOnly . '"><a href="' . $href . 'pageNumber=" . $nextPage . ""class="page-link text-dark">Next</a></li>';
            } else {
                $output = $output . '<li class="page-item   ' . $srOnly . '" disabled><a href=""class="page-link text-dark">Next</a></li>';
            }
        }
        return $output;
    }

    // function calculate total records count and trigger pagination function
    function showperpage($count, $per_page = "3", $href)
    {
        $perpage = $this->pagination($count, $per_page, $href);
        return $perpage;
    }
}
?>

Output: pagination Bootstrap

Gambar di bawah ini menunjukkan output dari contoh pagination Bootstrap ini. Dengan pilihan pilihan yang luar biasa ditampilkan dengan slider HTML.

pagination bootstrap

Unduh

Kembali ke atas


Source link

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.