kursus framework javascript online | Pagination Angka Ajax jQuery

Pagination memang salah satu contoh tools dimana ketika kita mempunyai sebuah data yang banyak lalu data itu kita tampilkan sebagian dan untuk menampilkan data yang lain kita gunakan pagination. Pagination sendiri ada beragam tampilannya ada yang angka dan ada juga yang next dan prev, lalu disini kami akan berbagi dan mencoba bagaimana caranya membuat pagination yang angka. Kebetulan disini untuk membuat sebuah pagination itu saya menggunakan ajax jquery, seperti apa simak terus ya teman-teman kursus framework javascript online.

Jika di atas saya menuliskan saya membuat cara pagination angka ini dengan sebuah ajax jquery, apa bedanya dengan yang lain, sebeneranya sama aja bedanya jika kita menggunakan ajax jquery data yang kita tampilkan. Ketika kita menampilkan data yang lain, data yang di tampilkan itu tidak akan reload seperti halnya kita tidak menggunakan ajax seperti hanya PHP saja misal, lebih enak bukan, oke langsung saja kita lihat caranya, dsini mempunyai template seperti ini

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
  <style>
    .pagination{
      cursor: pointer;
      border: 1px solid #666;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="row">
    <div class="col-md-8 offset-md-2">
      <div class="data-materi">
        
      </div>
    </div>
  </div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>

</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

.pagination{

cursor: pointer;

border: 1px solid #666;

}

</style>

</head>

<body>

</div>

</script>

</body>

</html>

Jadi kita siapkan saja template penampungnya yaitu data materi. lalu kita buatkan proses ajaxnya sperti ini ya kawan kursus framework javascript online.

  $(document).ready(function(){
    load_data();
    function load_data(page)
    {
      $.ajax({
        url: "proses.php",
        method: "POST",
        data: {page: page},
        success: function(data){
          $(".data-materi").html(data)
        }
      })
    }
    $(document).on("click", '.pagination', function(){
      var page = $(this).data("id");
      load_data(page);
    })
  })

$(document).ready(function(){

load_data();

function load_data(page)

{

$.ajax({

url: "proses.php",

method: "POST",

data: {page: page},

success: function(data){

$(".data-materi").html(data)

}

})

}

$(document).on("click", '.pagination', function(){

var page = $(this).data("id");

load_data(page);

})

Oke karena itu menuju web servicenya proses.php sekarang kita lihat

<?php  
$koneksi = mysqli_connect("localhost", "dumet", "school", "webmaster");
$per_page = 3;
$page = '';
$output = '';

if(isset($_POST["page"])){
  $page = $_POST["page"];
}else{
  $page = 1;
}

$offset = ($page - 1) * $per_page;
$query = mysqli_query($koneksi, "SELECT * FROM ab_post ORDER BY id DESC LIMIT $offset, $per_page ");

$output .= '
  <table class="table table-hover">
    <tr>
      <th scope="col">No</th>
      <th scope="col">Title</th>
      <th scope="col">Description</th>
    </tr>
';
$no = 1;

while($row = mysqli_fetch_array($query)){
  $output .= '
    <tr>
      <td>'.$no.'</td>
      <td>'.$row["tittle"].'</td>
      <td>'.$row["description"].'</td>
    </tr>    
  ';
  $no++;
}
$output .= '</table> <div class="text-center d-flex">';
$page_query = mysqli_query($koneksi, "SELECT * FROM ab_post ORDER BY id DESC");
$total_data = mysqli_num_rows($page_query);
$total_pagi = ceil($total_data/$per_page);
for($i=1; $i<=$total_pagi; $i++){
  $output .= "<span class='pagination mr-2 p-2' data-id='".$i."'>".$i."</span>";
}
$output .="</div>";
echo $output;
?>

<?php

$koneksi = mysqli_connect("localhost", "dumet", "school", "webmaster");

$per_page = 3;

$page = '';

$output = '';

if(isset($_POST["page"])){

$page = $_POST["page"];

}else{

$page = 1;

}

$offset = ($page - 1) * $per_page;

$query = mysqli_query($koneksi, "SELECT * FROM ab_post ORDER BY id DESC LIMIT $offset, $per_page ");

$output .= '

<tr>

<th scope="col">Title</th>

<th scope="col">Description</th>

</tr>

$no = 1;

while($row = mysqli_fetch_array($query)){

$output .= '

<tr>

<td>'.$row["tittle"].'</td>

<td>'.$row["description"].'</td>

</tr>

$no++;

}

$output .= '</table> <div class="text-center d-flex">';

$page_query = mysqli_query($koneksi, "SELECT * FROM ab_post ORDER BY id DESC");

$total_data = mysqli_num_rows($page_query);

$total_pagi = ceil($total_data/$per_page);

for($i=1; $i<=$total_pagi; $i++){

$output .= "<span class='pagination mr-2 p-2' data-id='".$i."'>".$i."</span>";

}

$output .="</div>";

echo $output;

Seperti yang kita lihat, proses pagination angka kita looping dulu berdasarkan jumlah total data yang sudah kita ceil ya, kita bulatkan kebawah, lalu hasi dari ceil tersebut kita masukan kedalam pagination angkanya, maka yang terjadi akan seperti ini

Oiya jangan lupa teman-teman siapkan juga database yang ingin di looping ya, jika tombol itu di tekan maka data yang ada di atas akan berganti sesuai dengan proses yang sudah kita atur, dan ketika kita melihat data yang lain tentunya tidak akan reload, bagaimana silahkan di coba ya, dan saya rasa cukup sampai disini belajar kita tentang Cara Membuat Pagination Angka Ajax jQuery semoga bermanfaat dan sampai jumpa pada artikel dari kursus online framework javascript berikutnya terimakasih.

Facebook DUMET School

Categories