Membuat Pagination dengan Jquery PHP dan MySQL

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 .

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, 'perPage'=>$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_content');
    $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