PHP - Membuat Paging Halaman tanpa DataTables
Beberapa waktu lalu saya telah berbagi tentang cara membuat pagination sederhana. Pagination tersebut memiliki kekurangan yaitu ketika datanya sangat banyak misalkan hingga ratusan atau ribuan baris, maka tombol paging yang tercetak pasti banyak juga. Walaupun sebenarnya tidak terlalu bermasalah, namun dari sisi estetika dan kemudahan akses akan sangat tidak nyaman. Oleh karena itu, pada tulisan ini, saya akan berbagi tentang cara membuat pagination yang lebih baik.
Pagination selanjutnya digunakan untuk menangani masalah paging dengan jumlah halaman lebih atau sangat banyak. Pembuatan paging yang mungkin kurang tepat jika dibuat dengan menggunakan JQuery DataTables. Ketika membuat pagination ini, aturan saya adalah jumlah halaman lebih dari 5(Anda bisa mengatur ulang sesuai dengan kebutuhan). Asumsi bahwa saat ini Anda memiliki kasus dimana paging mencapai 20 halaman atau lebih. Dari sini buat kondisi yaitu seperti dibawah ini:
Catatan:- N = 20, jumlah N adalah jumlah paging;
- n = posisi halaman paging;
- nn = halaman paling awal, yaitu 1
- n+1 = nilai posisi page saat ini + 1
Petunjuk pengkondisian beserta contohnya:
>> N = 20
>> jika n = 1
>> print n, n+1, n+2, dan N
>> jika n = 2
>> print nn, n, n+1, dan N
>> jika n = 3
>> print nn, n-1, n, n+1, dan N
>> jika n = 18
>> print nn, n-1, n, n+1, dan N
>> jika n = 19
>> print nn, n-1, n, N
>> jika n = 20
>> print nn, n+2, n-1, dan n
Paging
Buat file
apapun.php, isinya adalah kode untuk membuat paging menggunakan php, yaitu kode di bawah ini:<?php
//koneksi dan menentukan database
mysql_select_db("nama_database_anda", mysql_connect("lokasi_hosting(contoh:localhost)", "isi_dengan_username", "isi_dengan_password"));
//index awal data yang ingin ditampilkan
$default_index = 0;
//batasan menampilkan data
$default_batas = 10;
//jika terdapat nilai batas di URL, gunakan untuk mengganti nilai default $default_batas
if(isset($_GET['batas']))
{
$default_batas = $_GET['batas'];
}
//nomor halaman default
$nomor_halaman = 1;
//jika terdapat nilai halaman di URL, gunakan untuk mengganti nilai dafault dari $default_index
if(isset($_GET['halaman']))
{
$default_index = ($_GET['halaman']-1) * $default_batas;
$nomor_halaman = $_GET['halaman'];
}
/*
* ambil beberapa data kolom di tabel dengan data yang ditayangkan
* mulai dari index ke ($default_index) dengan jumlah hingga
* sebanyak ($default_batas)
*/
$ambil_data = mysql_query("SELECT Name, Region, Population, GNP FROM country limit ".$default_index.", ".$default_batas);
#menghitung total baris di tabel country
$total_baris = mysql_num_rows(
//mengambil data di tabel country
mysql_query("SELECT * FROM country")
);
# MEMBUAT TOMBOL PAGING
//inisiasi variabel yang memuat nomor halaman
$nomor_paging = 1;
//inisiasi variabel yang memuat total halaman
$total_paging = 0;
$html_paging = "<ul class='pagination'>";
/* asumsi nilai $total_baris adalah ganjil, contoh sederhana adalah sebagai berikut:
* ===============================================================
* misalkan data ada 5 baris, dan ditayangkan 2 baris per-halaman,
* maka untuk menghitung jumlah halamannya yaitu dengan mengurangi
* nilai 5 dengan 2 berturut-turut hingga bernilai kurang dari 2
* (yaitu : 1) yang masih ditampung di $total_baris
* asumsi nilai $total_baris adalah genap, contoh sederhana adalah sebagai berikut:
* ===============================================================
* misalkan data ada 4 baris, dan ditayangkan 2 baris per-halaman,
* cara menghitung sama seperti asumsi ganjil, hanya saja tidak ada
* nilai sisa
*/
while($total_baris - $default_batas > 0)
{
$total_paging = $nomor_paging;
$nomor_paging++;
$total_baris -= $default_batas;
}
/*
* asumsi nilai $total_baris adalah ganjil
* tersisa 1 baris lagi untuk ditayangkan yang value nya berada di $total_baris
*/
if($total_baris > 0)
{
$total_paging = $nomor_paging;
}
#PENGKONDISIAN UNTUK TOTAL PAGING
$numerik_paging = "";
//jika paging yang dibutuhkan banyak
if($total_paging >= 6)
{
for($a = 1; $a <= $total_paging; $a++){
if($a == $nomor_halaman && $a == 1)
$numerik_paging = "<li class='active'><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>
<li><a href='?halaman=".($a+1)."&batas=".$default_batas."'>".($a+1)."</a></li>
<li><a href='?halaman=".($a+2)."&batas=".$default_batas."'>".($a+2)."</a></li>
<li><a href='?halaman=".($total_paging)."&batas=".$default_batas."'>></a></li>";
if($a == $nomor_halaman && $a == 2)
$numerik_paging = "<li><a href='?halaman=1&batas=".$default_batas."'>1</a></li>
<li class='active'><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>
<li><a href='?halaman=".($a+1)."&batas=".$default_batas."'>".($a+1)."</a></li>
<li><a href='?halaman=".($a+1)."&batas=".$default_batas."'>></a></li>";
if($a == $nomor_halaman && $a >= 3)
$numerik_paging = "<li><a href='?halaman=1&batas=".$default_batas."'><</a></li>
<li><a href='?halaman=".($a-1)."&batas=".$default_batas."'>".($a-1)."</a></li>
<li class='active'><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>
<li><a href='?halaman=".($a+1)."&batas=".$default_batas."'>".($a+1)."</a></li>
<li><a href='?halaman=".$total_paging."&batas=".$default_batas."'>></a></li>";
if($a == $nomor_halaman && $a + 2 == $total_paging)
$numerik_paging = "<li><a href='?halaman=1&batas=".$default_batas."'><</a></li>
<li><a href='?halaman=".($a-1)."&batas=".$default_batas."'>".($a-1)."</a></li>
<li class='active'><a href='?halaman=".($a+1)."&batas=".$default_batas."'>".$a."</a></li>
<li><a href='?halaman=".($a+1)."&batas=".$default_batas."'>".($a+1)."</a></li>
<li><a href='?halaman=".$total_paging."&batas=".$default_batas."'>></a></li>";
if($a == $nomor_halaman && $a + 1 == $total_paging)
$numerik_paging = "<li><a href='?halaman=1&batas=".$default_batas."'><</a></li>
<li><a href='?halaman=".($a-1)."&batas=".$default_batas."'>".($a-1)."</a></li>
<li class='active'><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>
<li><a href='?halaman=".($a+1)."&batas=".$default_batas."'>".$total_paging."</a></li>";
if($a == $nomor_halaman && $a == $total_paging)
$numerik_paging = "<li><a href='?halaman=1&batas=".$default_batas."'><</a></li>
<li><a href='?halaman=".($a-2)."&batas=".$default_batas."'>".($a-2)."</a></li>
<li><a href='?halaman=".($a-1)."&batas=".$default_batas."'>".($a-1)."</a></li>
<li class='active'><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>";
}
//jika paging yang dibutuhkan sedikit:
}else if($total_paging < 6){
for($a = 1; $a <= $total_paging; $a++){
if($a == $nomor_halaman)
$numerik_paging = "<li class='active'><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>";
else
$numerik_paging = "<li><a href='?halaman=".$a."&batas=".$default_batas."'>".$a."</a></li>";
}
}
$html_paging .= $numerik_paging."</ul>";
# MEMBUAT TABEL YANG MENAYANGKAN DATA
$output_html = "<table class='table table-bordered'>".
"<tr>".
"<th>Nomor</th>".
"<th>Name</th>".
"<th>Region</th>".
"<th>Population</th>".
"<th>GNP</th>".
"<tr/>";
//perulangan membuat list data
$nomor_baris = $default_index + 1;
while($data = mysql_fetch_assoc($ambil_data))
{
$output_html .= "<tr>".
"<td>".$nomor_baris."</td>".
"<td>".$data["Name"]."</td>".
"<td>".$data["Region"]."</td>".
"<td>".$data["Population"]."</td>".
"<td>".$data["GNP"]."</td>".
"</tr>";
$nomor_baris++;
}
$output_html .= "</table>";
?>
<html>
<head>
<meta charset="utf8">
<meta content="width:device-width;initial-scale:1">
<!--styling instan dengan memanfaatkan framework bootstrap-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<title>dhan - Sample Pagination</title>
</head>
<body>
<div class="container">
<h2>Sample Pagination</h2>
<h5>Menggunakan sample database world.sql dari Mysql</h5>
</div>
<div class="container">
<div class="form-group" style="float:left">
<span>Tampilkan hingga :</span>
<input name='batas-baris' value='<?php echo $default_batas?>'/>
<span>baris</span>
<button id="batas" class="btn btn-danger btn-sm">Terapkan</button>
<script>
document.getElementById("batas").addEventListener("click", function(){
batas_baris = document.getElementsByName('batas-baris')[0].value;
window.location.href = "?halaman=1&batas="+batas_baris;
});
</script>
</div>
<!--tayangkan tabel country-->
<?php echo $output_html?>
<?php echo $html_paging?>
</div>
</body>
</html>Sample Data
Untuk melakukan uji coba, Anda bisa memanfaatkan sample data dari MySQL yang saya gunakan untuk menulis tutorial ini, Anda bisa mengaksesnya melalui link download mysql sample world database.
Demo
Anda dapat mencoba hasil dari penerapan kode di atas melalui halaman demo Sample Pagination
Sekian dari tulisan ini, jika terdapat kendala atau memiliki pertanyaan lain, silahkan tulisan melalui komentar
0 on: "PHP - Membuat Paging Halaman tanpa DataTables"