Membuat Pagination dengan jQuery Ajax PHP dan MySQL

Dalam suatu proyek web , pagination adalah bagian yang sangat penting dan dibutuhkan, untuk
menampilakn data yang ada di database . Dalam hal ini, Ajax pagination adalah salah satu cara
yang disukai oleh beberapa devloper web, karena akan membantu untuk meningkatkan User
Interface dari website yang anda kembangkan. Tutorial Membuat Pagination dengan jQuery
Ajax PHP dan MySQL ini akan menunjukkan bagaimana Anda dapat menerapkan pagination
Ajax di PHP menggunakan jQuery dan MySQL . Kami telah mengembangkan script sederhana
ini dengan membuat pagination dengan jQuery , Ajax , PHP , dan MySQL.

Pada gambar di atas adalah salah satu contoh pagination yang telah dibuat dengan
menggunakan PHP , dan hasilnya akan di tampilkan dari database MySQL dengan link
pagination . Melalui link pagination, Anda bisa menapilkan data dari database dengan jumlah
urutan yang akan ditampilkan. jQuery dan Ajax akan membantu untuk menampilkan data dari
database tergantung pada link pagination tanpa reload di halaman .
KODE PROMO : DOMAINDOTNET
Sebelum memulai Ajax Pagination di PHP , kita lihat struktur file berikut ini.

pagination.php
dbConfig.php
getData.php
index.php
jquery.min.js
style.css

Membuat Database
Untuk memulai membuat pagination ini kita akan memulai dengan membuat database dan tabel
postingan yang akan ditampilkan. Berikut script database dan tabel yang akan dibuat dalam
proyek pagination ini.

CREATE TABLE `posts` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`title` varchar(255) COLLATE utf8_unicode_ci NOT NULL,

`content` text COLLATE utf8_unicode_ci NOT NULL,

`created` datetime NOT NULL,

`modified` datetime NOT NULL,

`status` tinyint(1) NOT NULL DEFAULT '1' COMMENT '1=Active,

0=Inactive',

PRIMARY KEY (`id`)

) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

Membuat Pagnitation Class

Lanhkah selanjutnya adalah membuat Class Pagination untuk menghasilkan link pagination .
Disini anda dapat memberikan pengaturan link yang ada di dalam kelas Pagination . Opsi
konfigurasi umum digunakan adalah di bawah ini.
baseURL – baseURL memberikan URL untuk mengirim permintaan Ajax dan nanti data akan
ditampilkan sesuai dengan URL yang diakses dari link ini.
totalRows – Total jumlah data.
perPage – Berapa banyak data yang ingin ditampilkan pada setiap halaman .
contentDiv – Berikan ID dari elemen mana data pagination akan ditampilkan .
Script Penggunaan class Pagination akan seperti di bawah ini .

<?php

// Pagination links configuration

$pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount, 'p

erPage'=>$limit, 'contentDiv'=>'posts_content');

// Initialize pagination class

$pagination = new Pagination($pagConfig);

?>

<!-- Display pagination links -->

<?php echo $pagination->createLinks(); ?>

Membuat File dbConfig.php

File ini digunakan untuk menghubungkan database yang telah dibuat .

<?php

$dbHost = "localhost";

$dbUsername = "root";

$dbPassword = "";

$dbName = "codexworld";

// Create database connection

$db = new mysqli($dbHost, $dbUsername, $dbPassword, $dbName);

// Check connection

if ($db->connect_error) {

die("Connection failed: " . $db->connect_error);

?>

Membuat file index.php

File ini berisi beberapa JavaScript , PHP , dan kode HTML . Penjelasan lengkap dari maksud file
index.php disebutkan secara terpisah di bawah ini .
JavaScript :
Script ini Termasuk bagian dari script jQuery yang nantinya akan bekerja Ajax . Juga, beberapa
jQuery akan memerlukan untuk menampilkan dan menyembunyikan, hingga memuat overlay
pada saat proses permintaan Ajax .

<script src="jquery.min.js"></script>

<script type="text/javascript">

// Show loading overlay when ajax request starts

$( document ).ajaxStart(function() {

$('.loading-overlay').show();

});

// Hide loading overlay when ajax request completes

$( document ).ajaxStop(function() {

$('.loading-overlay').hide();

});

</script>
PHP & HTML :
Untuk menampilkan link pagination , Anda harus perlu membuat sebuah objek dari class
Pagination . Dan anda Juga akan menampilkannya dengan beberapa link berdasarkan data
yang ada di database, dengan menentukan batas setiap halaman dalam suatu pengaturan yang
ada di setiap link. Memanggil createLinks ( ) karena fungsi dari kelas Pagination untuk
menampilkan link pagination .

<div class="post-wrapper">

<div class="loading-overlay"><div class="overlay-

content">Loading.....</div></div>

<div id="posts_content">

<?php

//Include Pagination class file

include('Pagination.php');

//Include database configuration file

include('dbConfig.php');

$limit = 10;

//Get the total number of rows

$queryNum = $db->query("SELECT COUNT(*) as postNum FROM posts");

$resultNum = $queryNum->fetch_assoc();

$rowCount = $resultNum['postNum'];

//Initialize Pagination class and create object

$pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount

, 'perPage'=>$limit, 'contentDiv'=>'posts_content');

$pagination = new Pagination($pagConfig);

 //Get rows

$query = $db-
>query("SELECT * FROM posts RDER BY id DESC LIMIT $limit");

if($rowCount > 0){ ?>

<div class="posts_list">

<?php

while($row = $query->fetch_assoc()){

$postID = $row['id'];

?>

<div class="list_item"><a href="javascript:void(0);"><h2><?

php echo $row["title"]; ?></h2></a></div>

<?php } ?>

</div>

<?php echo $pagination->createLinks(); ?>

<?php } ?>

</div>

</div>

Membuat file getData.php

dengan file ini nantinya yang dieksekusi oleh AJAX dan juga digunakan untuk mendapatkan
nomor dari tiap halaman dari link pagination dan menampilkan data posting masing-masing
halaman .

<?php
if(isset($_POST['page'])){

//Include Pagination class file

include('Pagination.php');

//Include database configuration file

include('dbConfig.php');

$start = !empty($_POST['page'])?$_POST['page']:0;

$limit = 10;

//get number of rows

$queryNum = $db->query("SELECT COUNT(*) as postNum FROM posts");

$resultNum = $queryNum->fetch_assoc();

$rowCount = $resultNum['postNum'];

//initialize Pagination class

$pagConfig = array('baseURL'=>'getData.php', 'totalRows'=>$rowCount

, 'currentPage'=>$start, 'perPage'=>$limit, 'contentDiv'=>'posts_conten
t');

$pagination = new Pagination($pagConfig);

//get rows

$query = $db-
>query("SELECT * FROM posts ORDER BY id DESC LIMIT $start,$limit");

if($rowCount > 0){ ?>

<div class="posts_list">
 <?php

while($row = $query->fetch_assoc()){

$postID = $row['id'];

?>

<div class="list_item"><a href="javascript:void(0);"><h2><?

php echo $row["title"]; ?></h2></a></div>

<?php } ?>

</div>

<?php echo $pagination->createLinks(); ?>

<?php }

?>

Sekian Tutorial Membuat Pagination dengan jQuery Ajax PHP and MySQL untuk download
scriptnya silahkan klik link ini
Selamat Mencoba

Bagikan ini:

 Klik untuk berbagi pada Twitter(Membuka di jendela yang baru)

 21Klik untuk membagikan di Facebook(Membuka di jendela yang baru)21
 Klik untuk berbagi via Google+(Membuka di jendela yang baru)

Terkait
Cara Menampilkan Data Dari Database MySQL Menggunakan PHPMei 9, 2017dalam
"Pemrograman Web"
Cara Membuat CRUD Pada Angular Js Menggunakan PhpMyadminJuni 24, 2017dalam "Web
Hosting"
Cara Membuat CRUD Pada Angular JSJuni 24, 2017dalam "Pemrograman Web"