PHP

Kode Pagination PHP dengan Pencarian menggunakan AJAX

Posted on by administrator
14
Aug
1
(1)

oleh Vincy. Terakhir diubah pada 13 Juli 2022.

Mengambil dan menampilkan sebagian besar rekaman pada satu pengambilan bukanlah praktik yang baik. Ini akan meningkatkan beban server dan memiliki lebih banyak kerugian.

Pagination akan menyelesaikan masalah ini.

Sebagian besar situs web menunjukkan tautan angka untuk pagination. Ada berbagai cara untuk menambahkan pagination. beberapa dari mereka terdaftar di bawah ini.

  1. Kontrol navigasi sebelumnya-berikutnya.
  2. Jumlah tautan 1, 2, 3 … hingga … jumlah halaman.
  3. Sejumlah terbatas tautan halaman yang dapat diperluas pada navigasi.

Dalam tutorial ini, kita akan melihat sebuah contoh kode pagination PHP dengan pengurutan pencarian.

Contoh ini menambahkan pagination ke daftar record yang ditampilkan dalam tampilan tabular. Ini menggunakan jQuery AJAX untuk mengambil catatan untuk setiap halaman dari database.

Apa itu pagination?

  • Itu paginasi adalah metode sederhana untuk membagi data yang banyak menjadi beberapa halaman. Ini mencegah kerugian menampilkan semua catatan pada halaman.
  • Ini menunjukkan sejumlah catatan terbatas per halaman yang memungkinkan pandangan sekilas ke hasil halaman.
  • Hasil yang diberi paginasi memerlukan offset awal dan jumlah per halaman untuk menyetel LIMIT yang akan diambil.

Kelebihan dan kekurangan pagination

Ada lebih banyak manfaat menggunakan pagination PHP. beberapa dari mereka terdaftar di bawah ini.

  • Ini meningkatkan efisiensi dengan memuat konten halaman dengan cepat.
  • Ini mengurangi kelebihan server.
  • Tautan pagination akan mengungkapkan perkiraan data aplikasi.
  • Ini akan sangat meningkatkan respons situs dalam menampilkan perpustakaan media dengan pagination.
  • Ini meningkatkan pengalaman pengguna dalam menjelajahi hasil paginasi.

Hampir pagination PHP tidak memiliki kekurangan, tetapi tidak cocok dalam beberapa skenario. Sebagai contoh,

  • Ini dapat dilewati untuk aplikasi yang menampilkan catatan yang dapat dihitung dengan jari.
  • Tanpa atribut relasional (seperti prev, next URL), memberikan dampak negatif pada sudut pandang SEO.

Tentang contoh ini

Contoh ini memiliki kode untuk mengelompokkan pagination, menyortir, mencari halaman daftar.

UI pagination akan menampilkan link pagination terbatas. Ini memperluas tumpukan tautan untuk bergerak maju halaman demi halaman.

Dalam contoh ini, kami memiliki tiga opsi berdasarkan format pagination mana yang akan diubah.

Permintaan pagination membawa parameter pencarian dan pengurutan jika ada.

Itu memanggil skrip AJAX untuk mengirim pagination, mencari dan mengurutkan data permintaan ke PHP.

Ini memungkinkan untuk mencari dan mengurutkan berdasarkan nama melalui AJAX. Urutan pengurutan default adalah Ascending (ASC) untuk mengurutkan kolom nama dalam urutan abjad.

Acara di-klik dari tajuk kolom mengalihkan urutan penyortiran antara ‘ASC’ dan ‘DESC’

Struktur file

Ini adalah struktur file dari contoh pagination PHP. Ini memiliki hasil paginasi untuk dirender ke halaman beranda.

List.php adalah untuk menampilkan hasil query dengan batas per halaman. File perpage.php berisi handler untuk menyiapkan HTML pagination yang akan ditampilkan ke UI.

file pagination php

Halaman beranda HTML untuk merender UI pagination

Kode berikut menunjukkan HTML untuk menampilkan hasil database anggota.

Ini menampilkan panel pencarian berdasarkan nama di atas header tabel. Juga, kolom pertama menampilkan nama anggota dengan fitur pengurutan.

Tindakan pagination, pencarian, dan pengurutan PHP memberikan hasil tanpa penyegaran halaman. Ia menggunakan jQuery AJAX untuk meminta PHP melakukan tindakan ini tanpa memuat ulang halaman.

Fungsi JavaScript “listViaAJAX()” meminta hasil pagination PHP melalui AJAX. Fungsi “sortList()”, mengatur parameter permintaan pemesanan untuk mendapatkan hasil yang diurutkan.

Tombol kirim formulir pencarian memanggil kode listViaAJAX() untuk mengirim kata kunci. Dalam panggilan balik, ia mendapatkan HTML respons dari server dan memperbarui UI.

index.php

<html>
<head>
	<link href="https://phppot.com/php/php-pagination-search/./assets/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<h2 class="page-title">PHP Pagination with Search</h2>
	<div id="grid">
		<form name="frmSearch" id="frmSearch" method="post" action="https://phppot.com/php/php-pagination-search/index.php">
			<div class="search-box">
				<label>Search :</label> <input type="text" id="search"
					placeholder="name" name="filter_value" class="demoInputBox" /> <input
					type="button" name="go" class="search-form-btn" value="Search"
					onClick="listViaAJAX();"> <input type="reset"
					class="search-form-btn" value="Reset"
					onclick="window.location="https://phppot.com/php/php-pagination-search/index.php"">
			</div>
			<table id=mytable cellpadding="10" cellspacing="1">
				<thead>
					<tr>
						<th class="sortable"><span onClick="sortList();"><input
								type="hidden" name="order_type" id="order-type" value="asc" />Name</span>
							<img src="images/sort-down.svg" /></th>
						<th>Registered Date</th>
						<th class="align-right">Subscription Amount</th>
					</tr>
				</thead>
				<tbody id="table-body">
				<?php
    require_once __DIR__ . '/list.php';
    ?>				
				<tbody>
			</table>
		</form>
	</div>
</body>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"
	integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
	crossorigin="anonymous"></script>
<script src="./assets/pagination-ajax.js"></script>
</html>

Basis data yang diberi paginasi menghasilkan tampilan tabular

File list.php ini untuk mengambil dan menampilkan hasilnya ke UI. Permintaan pagination PHP ini dipanggil melalui AJAX dengan mengklik tautan halaman.

Kode di bawah ini mempersiapkan query MySQL untuk mengambil data dari database. Kueri ini menggunakan LIMIT untuk menampilkan data dengan batas per halaman.

Kode ini mendapatkan jumlah catatan total dan batas per halaman. Ini melewati dua parameter ini fungsi showPerpage() untuk menghasilkan HTML pagination PHP.

Ditambahkan ke parameter pagination, kode PHP ini menerima permintaan pencarian, pengurutan.

Ini menyiapkan klausa WHERE dan ORDER BY berdasarkan permintaan pencarian dan pengurutan. Klausa ini dilampirkan ke kueri untuk mendapatkan hasil yang difilter.

list.php

<?php
use PhppotDataSource;

require_once "perpage.php";
require_once __DIR__ . "/lib/DataSource.php";
$dataSource = new DataSource();

$name = "";
$queryCondition = "";
$paramType = "";
$paramValue = array();
if (! empty($_POST["filter_value"])) {
    $name = $_POST["filter_value"];
    $queryCondition .= " WHERE name LIKE ?";
    $paramType .= 's';
    $paramValue[] = $_POST["filter_value"] . '%';
}

$orderBy = "name";
$order = "asc";
if (! empty($_POST["order_type"])) {
    $order = $_POST["order_type"];
}

$nextOrder = "asc";
if ($order == "asc") {
    $nextOrder = "desc";
}
$query = "SELECT * from tbl_member " . $queryCondition . " ORDER BY " . $orderBy . " " . $order . " ";
$href="https://phppot.com/php/php-pagination-search/index.php";
$perPage = 5;
$page = 1;
if (isset($_POST['pagination_offset'])) {
    $page = $_POST['pagination_offset'];
}
$start = ($page - 1) * $perPage;

if ($start < 0)
    $start = 0;

$queryWithLimit = $query . " limit " . $start . "," . $perPage;

$resultpage = $dataSource->select($queryWithLimit, $paramType, $paramValue);

if (! empty($resultpage)) {
    $count = $dataSource->getRecordCount($query, $paramType, $paramValue);

    $resultpage["perpage"] = showperpage($count, $perPage, $href);
}
?>
<?php 
if (! empty($resultpage)) {
    foreach ($resultpage as $k => $v) {
        if (is_numeric($k)) {
            ?>
                            <?php
            $date = $resultpage[$k]["date"];
            $newDate = date("d-m-Y", strtotime($date));
            ?>
<tr>
	<td class="column1"><?php echo $resultpage[$k]["name"]; ?></td>
	<td class="column2"><?php echo $newDate ?></td>
	<td class="column3 align-right">$ <?php echo $resultpage[$k]["subscription_amount"]; ?></td>
</tr>
<?php
        }
    }
}
if (isset($resultpage["perpage"])) {

    ?>
<tr>
	<td colspan="5" class="align-center"> <?php echo $resultpage["perpage"]; ?></td>
</tr>
<?php } ?>

Handler eksternal untuk menyiapkan kontrol pagination PHP

Menggunakan konstanta untuk membagi hasil database menjadi halaman. Kode ini menggunakan dua fungsi berikut.

  • perpage() – menyiapkan HTML untuk tautan UI pagination.
  • showperpage() – mengembalikan respons HTML pagination.

Fungsi perpage() menambahkan atribut onClick ke link pagination PHP. Ini memanggil kode AJAX dengan mengirimkan offset kueri pagination.

Ini menggunakan offset, hitungan per halaman dan jumlah total catatan untuk menghitung jumlah halaman. Ini menjalankan loop melalui jumlah halaman untuk menampilkan tautan pagination.

Itu menambahkan atribut HTML untuk menyorot halaman saat ini di antara tautan halaman.

perpage.php

<?php
function perpage($count, $per_page="5",$href) {
    $output="";
    $paging_id = "link_perpage_box";
    if(!isset($_POST["pagination_offset"])) $_POST["pagination_offset"] = 1;
    if($per_page != 0)
        $pages  = ceil($count/$per_page);
        if($pages>1) {

            if(($_POST["pagination_offset"]-3)>0) {
                if($_POST["pagination_offset"] == 1)
                    $output = $output . '<span id=1 class="current-page">1</span>';
                    else
                        $output = $output . '<input type="hidden" name="pagination_offset" value="1" /><input type="button" class="perpage-link" value="1" onClick="listViaAJAX()" />';
            }
            if(($_POST["pagination_offset"]-3)>1) {
                $output = $output . '...';
            }

            for($i=($_POST["pagination_offset"]-2); $i<=($_POST["pagination_offset"]+2); $i++)
            {

                if($i<1) continue;
                if($i>$pages) break;
                if($_POST["pagination_offset"] == $i)
                    $output = $output . '<span id='.$i.' class="current-page" >'.$i.'</span>';
                    else
                        $output = $output . '<input type="hidden" name="pagination_offset" value="' . $i . '" /><input type="button" class="perpage-link" value="' . $i . '" onClick="listViaAJAX()" />';
            }

            if(($pages-($_POST["pagination_offset"]+2))>1) {

                $output = $output . '...';
            }

            if(($pages-($_POST["pagination_offset"]+2))>0) {
                if($_POST["pagination_offset"] == $pages)
                    $output = $output . '<span id=' . ($pages) .' class="current-page">' . ($pages) .'</span>';
                    else
                        $output = $output . '<input type="hidden" name="pagination_offset" value="' . $pages . '" /><input type="button" class="perpage-link" value="' . $pages . '" onClick="listViaAJAX()" />';

            }
        }
        return $output;
}

function showperpage($count, $per_page = 5, $href)
{
    $perpage = perpage($count, $per_page,$href);
    return $perpage;
}
?>

skrip jQuery AJAX untuk memanggil daftar paginasi dari PHP

Skrip jQuery AJAX ini memanggil kode pagination PHP di sisi server.

Ini memanggil PHP endpoint index.php dengan mengirimkan data formulir. Ini membuat serial dan memposting data berikut ke PHP.

  • Offset halaman. Standarnya adalah 0.
  • Cari Kata Kunci.
  • Urutan pengurutan. Standarnya adalah urutan menaik (ASC).

Fungsi sortlist() mengubah urutan pengurutan dengan mengklik nama kolom yang sesuai.

pagination-ajax.js

function listViaAJAX() {
	$.ajax({
        method: "POST",
        url: "list.php",
        data: $("#frmSearch").serialize(),
    }).done(function( response ) {
		$("#table-body").html(response);
    });
}

function sortList() {
	if($("#order-type").val() == 'asc') {
		$("#order-type").val('desc');
		$(".sortable img").attr("src", "images/sort-up.svg");
	} else {
		$("#order-type").val('asc');
		$(".sortable img").attr("src", "images/sort-down.svg");
	}
	listViaAJAX();
}

Skrip basis data

Unduh skrip database di bawah ini ke lingkungan Anda. Ini menunjukkan skema database dengan struktur tabel.

Ini juga memiliki data sampel dalam tabel database target. Ini mendukung untuk mulai melihat hasil kode pagination PHP dengan pencarian.

sql/database.sql

--
-- Database: `blog_eg`
--

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

--
-- Table structure for table `tbl_member`
--

CREATE TABLE `tbl_member` (
  `id` int(255) NOT NULL,
  `name` varchar(256) NOT NULL,
  `date` date NOT NULL,
  `subscription_amount` varchar(256) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Dumping data for table `tbl_member`
--

INSERT INTO `tbl_member` (`id`, `name`, `date`, `subscription_amount`) VALUES
(1, 'Jennifer d' Sousa  ', '2022-01-20', '10'),
(2, 'Tom Adomian', '2021-12-25', '10'),
(3, 'Vincent Thomas', '2021-12-24', '100'),
(4, 'Lara Ricky', '2021-12-25', '100'),
(5, 'Kevin Fernandes', '2021-12-17', '100'),
(6, 'Leena Christy', '2021-12-16', '40'),
(7, 'Christian Benchamin', '2021-12-19', '60'),
(8, 'Abraham Maslow', '2021-12-17', '175'),
(9, 'Helan Immaculate', '2021-12-16', '190'),
(10, 'Jane Jancy', '2021-12-19', '30');

--
-- Indexes for dumped tables
--

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

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_member`
--
ALTER TABLE `tbl_member`
  MODIFY `id` int(255) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=24;

Output paginasi PHP

Tangkapan layar berikut menampilkan kode pagination PHP. Ini menunjukkan hasil tabular dengan tautan pagination dan panel pencarian.

hasil pencarian pagination php

Unduh

Kembali ke Atas


Source link

How useful was this post?

Click on a star to rate it!

Average rating 1 / 5. Vote count: 1

No votes so far! Be the first to rate this post.

administrator