Cara Membuat Paging Dengan AJAX


Cara Membuat Paging Dengan AJAX

kalau tadi saya share tutorial cara membuat paging di PHP kali ini saya akan share tutorial cara membuat paging dengan ajax, disini saya menggunakan plugin dari jquery, anda bisa mendownloadnya disini atau bisa menyalin kode berikut
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
dan untuk response dari AJAX nya sendiri saya menggunakan format JSON, jika anda belum tahu apa itu format JSON saya sarankan untuk membaca pengertian JSON terlebih dahulu.
untuk pembuatan pagingnya sendiri tidak jauh berbeda dengan tutorial sebelumnya, hanya saja dalam tutorial kali ini proses pembuatan paging menggunakan javascript
pertama buatlah database terserah anda, kemudian jalankan sintak sql berikut di dalam database yang sudah anda buat
-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama` varchar(25) DEFAULT NULL,
  `alamat` text,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=44 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES ('1', 'Rohmat', 'Jlan. Pantura ciasem tengah');
INSERT INTO `users` VALUES ('2', 'Mimin', 'Jlan. Krajan timur');
INSERT INTO `users` VALUES ('3', 'Maman', 'Jlan. Krajan  barat');
INSERT INTO `users` VALUES ('4', 'Roni', 'Jlan. Mekar sari indah ');
INSERT INTO `users` VALUES ('5', 'Rachmat Hidayat', 'Jlan. Garuda 1');
INSERT INTO `users` VALUES ('6', 'Terzo', 'Jlan. Garuda 2');
INSERT INTO `users` VALUES ('7', 'carlos', 'Jlan. Garuda 3');
INSERT INTO `users` VALUES ('8', 'Dwi Susanti Mustari', 'Jlan. Garuda 4');
INSERT INTO `users` VALUES ('9', 'Desmond Satria Andrian', 'Jlan. Garuda 5');
INSERT INTO `users` VALUES ('10', 'Ka Ar', 'Jlan. Garuda 6');
INSERT INTO `users` VALUES ('11', 'Ka Keke', 'Jlan. Garuda 7');
INSERT INTO `users` VALUES ('12', 'Ka Deri', 'Jlan. Garuda 8');
INSERT INTO `users` VALUES ('13', 'Ka Rendy', 'Jlan. Garuda 9');
INSERT INTO `users` VALUES ('14', 'Ka Yanti', 'Jlan. Garuda 10');
INSERT INTO `users` VALUES ('15', 'Ka Nury', 'Jlan. Garuda 11');
INSERT INTO `users` VALUES ('16', 'Salma', 'Jlan. Garuda 12');
INSERT INTO `users` VALUES ('17', 'Terryn', 'Jlan. Garuda 13');
INSERT INTO `users` VALUES ('18', 'Hafiz', 'Jlan. Garuda 14');
INSERT INTO `users` VALUES ('19', 'Felicia', 'Jlan. Garuda 15');
INSERT INTO `users` VALUES ('20', 'Dhia', 'Jlan. Garuda 16');
INSERT INTO `users` VALUES ('21', 'Marvel', 'Jlan. Garuda 17');
INSERT INTO `users` VALUES ('22', 'Naqi', 'Jlan. Garuda 18');
INSERT INTO `users` VALUES ('23', 'Aca', 'Jlan. Garuda 19');
INSERT INTO `users` VALUES ('24', 'Mazaya', 'Jlan. Garuda 20');
INSERT INTO `users` VALUES ('25', 'Ahliva', 'Jlan. Garuda 21');
INSERT INTO `users` VALUES ('26', 'Fatih ', 'Jlan. Garuda 22');
INSERT INTO `users` VALUES ('27', 'Kareem', 'Jlan. Garuda 23');
INSERT INTO `users` VALUES ('28', 'Najwa', 'Jlan. Garuda 24');
INSERT INTO `users` VALUES ('29', 'Joshua', 'Jlan. Garuda 25');
INSERT INTO `users` VALUES ('30', 'Marciello', 'Jlan. Garuda 26');
INSERT INTO `users` VALUES ('31', 'Alisha', 'Jlan. Garuda 27');
INSERT INTO `users` VALUES ('32', 'Sakif', 'Jlan. Garuda 28');
INSERT INTO `users` VALUES ('33', 'Kay', 'Jlan. Garuda 29');
INSERT INTO `users` VALUES ('34', 'Shafa', 'Jlan. Garuda 30');
INSERT INTO `users` VALUES ('35', 'Afya', 'Jlan. Garuda 31');
INSERT INTO `users` VALUES ('36', 'Athala', 'Jlan. Garuda 32');
INSERT INTO `users` VALUES ('37', 'Gelar', 'Jlan. Garuda 33');
INSERT INTO `users` VALUES ('38', 'Gyan', 'Jlan. Garuda 34');
INSERT INTO `users` VALUES ('39', 'AliaZahra', 'Jlan. Garuda 35');
INSERT INTO `users` VALUES ('40', 'Nabil', 'Jlan. Garuda 36');
INSERT INTO `users` VALUES ('41', 'Rangga', 'Jlan. Garuda 37');
INSERT INTO `users` VALUES ('42', 'Aramazaya', 'Jlan. Garuda 38');
INSERT INTO `users` VALUES ('43', 'Amara', 'Jlan. Garuda 39');
kemudian buatlah project dengan nama terserah anda lalu salin kode berikut dan simpan file dengan nama koneksi.php
<?php
 $host = 'localhost';
 $user = 'root';
 $pass = '';
 $db = 'belajar_paging';

 $conn = mysql_connect($host, $user, $pass);
 mysql_select_db($db, $conn);
keterangan :
ganti isi dari $user, $pass dan $db, sesuai dengan username, password dan database anda
setelah koneksi dibuat sekarang buat file dengan nama data.php dan salin kode berikut
<?php
 require_once __DIR__.'/koneksi.php';

 $response = array('paging'=>array(), 'data'=>array());

 // set page
 $page = isset($_GET['page']) ? (int)$_GET['page'] : 1;

 // data akan di tampilkan 10 baris perhalaman
 $perpage = 10;

 // metentukan offset
 // offset sendiri menentukan data yang akan di lewati setiap baris
 $limit = ($page - 1) * $perpage;

 $prev = 1;
 $next = 2;

 // menentukan angka awal untuk paging
 $start_page = ($page - $prev) < 1 ? 1 : ($page - $prev);

 // set query
 $sql = 'SELECT * FROM users';

 // menentukan jumlah data yang ada di table users
 $rs = mysql_query($sql);
 $record = mysql_num_rows($rs);

 // menentukan total paging
 $total_page = ceil($record / $perpage);

 // menentukan jumlah angka yang akan di tampilkan
 $display_page = $start_page + $prev + $next;
 if($display_page > $total_page){
  $display_page = $total_page;
 }

 // memecah data berdasarkan :
 // $limit : data awal yang akan di lewati
 // $perpage : jumlah data yang akan di tampilkan
 $sql .= ' LIMIT '.$limit.','.$perpage;
 $rs = mysql_query($sql);

 $response['paging'] = array(
  'page'=>$page,
  'perpage'=>$perpage,
  'prev'=>$prev,
  'next'=>$next,
  'start_page'=>$start_page,
  'display_page'=>$display_page,
  'total_page'=>$total_page
 );

 while($row = mysql_fetch_array($rs)){
  $id = $row['id'];
  $nama = $row['nama'];
  $alamat = $row['alamat'];

  array_push($response['data'], array('id'=>$id, 'nama'=>$nama, 'alamat'=>$alamat));
 }

 echo json_encode($response);
file data.php ini adalah proses data yang akan di tampilkan di halaman utama, anda bisa mengganti jumlah data yang akan di tampilkan di setiap page dengan merubah angka pada $perpage sesuai dengan kebutuhan anda.
dan yang terakhir buat file dengan nama index.php dan salin kode berikut
<!DOCTYPE html>
<html>
<head>
<title>MEMBUAT PAGING DI PHP</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<style type="text/css">
body { font-family: Verdana; font-size: 14px; }
.container { margin: auto; width: 800px; }
.container .loading { text-align: center; }
.container table { width: 100%; }
.container table thead tr,
.container table tfoot tr { height: 40px; }
.container table thead tr { background-color: #6CA601; color: #FFFFFF; }
.container table tfoot tr th { border-bottom: 1px solid #34641D; }
.container table tbody tr:nth-child(even) { background-color: #EEEEEE; }
.container table tbody tr:nth-child(odd) { background-color: #FFFFFF; }
.container table tbody tr td { padding: 5px 10px; color: #34641D; }
.container .pagination { display: inline-block; }
.container .pagination li { list-style: none; float: left; margin: 0 10px; }
.container .pagination li a { text-decoration: none; font-size: 16px; color: #34641D; }
</style>
</head>
<body>
<div class="container">
<h4 class="loading">LOADING..</h4>
<table>
<thead>
 <tr>
 <th>ID</th>
 <th>NAMA</th>
 <th>ALAMAT</th>
 </tr>
</thead>
<tbody class="data">
</tbody>
<tfoot>
 <tr>
 <th colspan="3" class="paging">
 </th> 
 </tr>
</tfoot>
</table>
</div>
<script type="text/javascript">
 // mengirim data berupa parameter "page" ke file data.php agar di proses menjadi :
 // 1. jumlah data yang akan di tampilkan berdasarkan page
 // 2. data yang di perlukan untuk pembuatan paging
 function page(page = 1){
  $.ajax({
   'url': 'data.php',
   'type': 'GET',
   'dataType': 'JSON',
   'data': {
    page: page
   },
   'beforeSend': function(){
    loading(true);
   },
   'success': function(response){
    loading(false);
    draw_data(response.data);
    create_paging(response.paging);
   }
  });
 }

 // memecah data yang terima oleh proses ajax
 function draw_data(response){
  // console.log(response);
  var data = $('.data');
  var content = '';

  for(var i=0; i<response.length; i++){
   content += '<tr>';
   content += '<td align="center" width="40">'+ response[i].id +'</td>';
   content += '<td>'+ response[i].nama +'</td>';
   content += '<td>'+ response[i].alamat +'</td>';
   content += '</tr>';
  }

  data.html(content);
 }

 // membuat paging berdsarkan data yang terima oleh proses ajax
 function create_paging(response){
  // console.log(response);
  var data_paging = $('.paging');
  var result_page = '';

  if(response.total_page > 1){
   result_page += '<ul class="pagination">';

   if(response.page > (response.prev + 1)){
    result_page += '<li><a href="javascript:page(1)">first</a></li>';
    result_page += '<li><a href="javascript:page('+ (response.page - 1) +')">prev</a></li>';
   }

   for(var i=response.start_page; i<=response.display_page; i++){
    if(i == response.page){
     result_page += '<li><a href="#'+ i +'">'+ i +'</a></li>';
    }else{
     result_page += '<li><a href="javascript:page('+ i +')">'+ i +'</a></li>';
    }
   }

   if(response.total_page > response.display_page){
    result_page += '<li><a href="javascript:page('+ (response.page + 1) +')">next</a></li>';
    result_page += '<li><a href="javascript:page('+ response.total_page +')">last</a></li>';
   }

   result_page += '</ul>';
  }

  data_paging.html(result_page);
 }

 function loading(load = false){
  if(load == true){
   $('.loading').show();
  }else{
   $('.loading').hide();
  }
 }

 page(1);
</script>
</body>
</html>
Ok, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga barmanfaat.

Berbagi Via

Share Facebook Share Twitter Share Google+ Share Pinterest
Jangan lupa tinggalkan komentarnya ya :)

No comments:

Post a Comment