Tutorial / Cara membuat paging atau pagination dengan Ajax dan PHP

Pemberian halaman (paging) web sering dijadikan sebagai solusi untuk mengatur content web yang berisi berita, artikel, dan sejenisnya. Dalam implementasinya, isi berita tidak ditampilkan semua, tetapi cukup deskripsi singkatnya saja. Dengan demikian, anda bisa menghemat ruang halaman web, dimana satu halaman bisa menampung banyak berita.

Untuk programmer back end mungkin sudah tidak aneh lagi dengan kata paging karna disetiap sistem yang dia buat pasti terdapat pagingnya agar tidak menjadi penumpukan data dalam satu halaman. sebenernya untuk teknik pembuatan paging sangatlah banyak ada yang dengan PHP, Ajax atau yang lainnya, tetapi di artikel kali ini kita hanya akan membahas dengan menggunakan Ajax. Karena, penggunaanya sangat cepat dibandingkan dengan membuatnya dengan PHP.

Baik mari kita langsung ke tutorialnya tentang Cara membuat paging atau pagination dengan Ajax dan PHP

1. Buatlah database dengan nama db_test dan buat juga satu table bernama siswa. isi field nya adalah id_siswa, nama, dan alamat.

2. Jika anda sudah selesai membuat database, Silahkan anda buat file config.inc.php yang berfungsi sebagai koneksi database.

<?php
$db_username = 'root';
$db_password = '';
$db_name = 'db_test';
$db_host = 'localhost';
$item_per_page = 5; //berapa item yang akan ditampilkan

$mysqli = new mysqli($db_host, $db_username, $db_password, $db_name);
if ($mysqli->connect_error) {
    die('Error : ('. $mysqli->connect_errno .') '. $mysqli->connect_error);
}
?>

3. selanjutnya silahkan buat lagi file fetch_pages.php

<?php
if(isset($_POST) && isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest'){

include("config.inc.php");
if(isset($_POST["page"])){
$page_number = filter_var($_POST["page"], FILTER_SANITIZE_NUMBER_INT, FILTER_FLAG_STRIP_HIGH);
if(!is_numeric($page_number)){die('Invalid page number!');}
}else{
$page_number = 1;
}

$results = $mysqli->query("SELECT COUNT(*) FROM siswa");
$get_total_rows = $results->fetch_row();
$total_pages = ceil($get_total_rows[0]/$item_per_page);

$page_position = (($page_number-1) * $item_per_page);


$results = $mysqli->prepare("SELECT * FROM siswa ORDER BY id_siswa ASC LIMIT $page_position, $item_per_page");
$results->execute();
$results->bind_result($id_siswa, $nama, $alamat);

?>
<div class='table'>
<h2 align='center'>Tabel siswa</h2>
<table border='1px'>
<tr>
<th>Id Siswa</th>
<th>Nama</th>
<th>Alamat</th>
</tr>

<?php while($results->fetch()) { ?>
<tr>
<td width='70px'><?php echo $id_siswa; ?></td>
<td><?php echo $nama; ?></td>
<td><?php echo $alamat; ?></td>
</tr>
<?php } ?>
</table>
<?php echo paginate_function($item_per_page, $page_number, $get_total_rows[0], $total_pages); ?></td>
</div>
<?php
exit;
}
function paginate_function($item_per_page, $current_page, $total_records, $total_pages)
{
    $pagination = '';
    if($total_pages > 0 && $total_pages != 1 && $current_page <= $total_pages){
        $pagination .= '<ul class="pagination">';
       
        $right_links    = $current_page + 3;
        $previous       = $current_page - 3;
        $next           = $current_page + 1;
        $first_link     = true;
       
        if($current_page > 1){
$previous_link = ($previous==0)? 1: $previous;
            $pagination .= '<li class="first"><a href="#" data-page="1" title="First">First</a></li>';
            $pagination .= '<li><a href="#" data-page="'.$previous_link.'" title="Previous">Previous</a></li>';
                for($i = ($current_page-2); $i < $current_page; $i++){
                    if($i > 0){
                        $pagination .= '<li><a href="#" data-page="'.$i.'" title="Page'.$i.'">'.$i.'</a></li>';
                    }
                }  
            $first_link = false;
        }
       
        if($first_link){
            $pagination .= '<li class="first active">'.$current_page.'</li>';
        }elseif($current_page == $total_pages){
            $pagination .= '<li class="last active">'.$current_page.'</li>';
        }else{
            $pagination .= '<li class="active">'.$current_page.'</li>';
        }
               
        for($i = $current_page+1; $i < $right_links ; $i++){
            if($i<=$total_pages){
                $pagination .= '<li><a href="#" data-page="'.$i.'" title="Page '.$i.'">'.$i.'</a></li>';
            }
        }
        if($current_page < $total_pages){
$next_link = ($i > $total_pages) ? $total_pages : $i;
                $pagination .= '<li><a href="#" data-page="'.$next_link.'" title="Next">Next</a></li>';
                $pagination .= '<li class="last"><a href="#" data-page="'.$total_pages.'" title="Last">Last</a></li>';
        }
       
        $pagination .= '</ul>';
    }
    return $pagination;
}
?>

4. dan yang terakhir buat juga file index.php sebagai file untuk yang menampilkannya

<!DOCTYPE HTML>
<html>
<head>
<title>Ajax Pagination - Dewa Coding 21</title>

<link rel='stylesheet' type='text/css' href='style.css' />

<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#results" ).load( "fetch_pages.php");

$("#results").on( "click", ".pagination a", function (e){
e.preventDefault();
var page = $(this).attr("data-page");
$("#results").load("fetch_pages.php",{"page":page}, function(){});
});
});
</script>
</head>
<body>
<div id="results"><!-- content akan tampil disini --></div>
</body>
</html>

Demikian lah tutorial kali ini sangat mudah bukan cara membuatnya, jadi kita berharap anda semua jangan selalu copy paste punya orang lebih baik kita membuat sendiri karena lebih bagus dibanding kita copy paste yang orang lain.

Untuk source code atau semua file berikut designnya bisa anda download disini / here

Terima kasih telah mengunjungi blog Dewa Coding 21 :)

Tweet

Related Posts

Tutorial / Cara membuat paging atau pagination dengan Ajax dan PHP

4/ 5

Oleh Unknown

Unknown Pada 16:56:00 Komentar