Tunggu Sebentar ...

Data Grid JeasyUI Paging - PHP

Ditulis oleh

Setelah beberapa waktu lalu saya catat tentang datagrid jeasyui sederhana, kali ini saya juga mau catat tentang jeasyui. Masih sama, masih dengan contoh yang sederhana, bedanya adalah kali ini datagrid jeasyui nya menggunakan paging / halaman, sedangkan catatan kemarin tidak menggunakan paging, jadi cuma contoh menampilkan data saja di datagrid-nya.

Sebelumnya, harus download terlebih dahulu datagrid jeasyui-nya, bisa didownload disini. Sekalian juga kalau bisa lihat-lihat tutorialnya disana. Sebenarnya menurut saya sudah bagus tutorial disana, mudah dimengerti. Tapi, ini saya catatkan versi saya tentunya. Ya engga jauh beda juga sih. Cuma ini saya pilah-pilah dengan contoh database dari saya.

Seperti biasa, saya buat buatkan code. Disini saya bagi 2 file code nya, yaitu :

1. jeasyuipaging.php , untuk grid-nya atau menampilkan datanya.

2. datajeasyuipaging.php , untuk merespon request dari gridnya. Misalnya menampilkan data berdasarkan paging. Meski file ini berupa file php, tetapi hasilnya adalah berupa data json.

#jeasyuipaging.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DataGrid Jeasyui Paging - DM</title>
    <link rel="stylesheet" type="text/css" href="jeasyui144/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="jeasyui144/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="jeasyui144/themes/color.css">
    <link rel="stylesheet" type="text/css" href="jeasyui144/demo/demo.css">
    <script type="text/javascript" src="jeasyui144/jquery.min.js"></script>
    <script type="text/javascript" src="jeasyui144/jquery.easyui.min.js"></script>
</head>
<body>
  <h2>DataGrid Jeasyui Paging</h2>
  <table id="tt"
         title = "Data Grid JeasyUI Paging"
         style="width:750px;height:250px"
         url="datajeasyuipaging.php"
         rownumbers="true" pagination="true"
         class="easyui-datagrid">
     <thead>
       <tr>
          <th field="product_code" width="80">Kode</th>
          <th field="product_name" width="300">Produk</th>
          <th field="quantity" width="80" align="right" >Stok</th>
          <th field="price" width="80" align="right">Harga</th>
       </tr>
     </thead>
   </table>

</body>
</html>

Code untuk jeasyuipaging.php contohnya seperti diatas. Pada code diatas tersebut, terdapat :

<table id="tt"
       title = "Data Grid JeasyUI Paging"
       style="width:750px;height:250px"
       url="datajeasyuipaging.php"
       rownumbers="true" pagination="true"
       class="easyui-datagrid">

- url="datajeasyuipaging.php" itu adalah file untuk merespon request dari datagrid tersebut.
- pagination="true" untuk menampilkan paging,
- rownumbers="true" untuk menampilkan jumlah baris.

Sedangkan pada bagian code ini :

<th field="product_code" width="80">Kode</th>
<th field="product_name" width="300">Produk</th>
<th field="quantity" width="80" align="right" >Stok</th>
<th field="price" width="80" align="right">Harga</th>

misalnya field = "product_code" itu berdasarkan dari hasil data json datajeasyuipaging.php. Dan ini tergantung masing-masing field-nya setiap orang beda-beda, dalam hal ini saya memakai itu.

Perlu diketahui, bentuk database saya seperti ini table nya, dengan nama table product, dan nama databasenya test

#datajeasyuipaging.php

<?php
   /************** database nya disesuaikan ***********/
   $server = "localhost";
   $user   = "root";
   $pass   = "usbw";
   $db     = "test";
   
   $database = new mysqli($server, $user, $pass, $db); 
   /****************************************************/
   $data = array();
   $result = array();
   
   
   /* merespon request dari datagrid */
   $page  = isset($_POST['page']) ? intval($_POST['page']) : 1;
   $limit = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
   /* @end merespon request dari datagrid */
   
   $sqljml   = "select count(*) as jml from product";
   /* jml data */
   $qj = $database->query($sqljml);
   if($qj) {
     $rj = $qj->fetch_assoc();
	 $jmldata = $rj['jml'];
   } else {
     $jmldata = 0;
   }
   
   /* @end jml data */
   
   /* buat paging atau halaman */
   if( $jmldata > 0 && $limit > 0) { 
       $total_pages = ceil($jmldata/$limit); 
   } else { 
       $total_pages = 0; 
   }
   
   if ($page > $total_pages) $page = $total_pages;
   $start = $limit*$page - $limit;
   if($start < 0) $start = 0;
   /* @end buat paging atau halaman */
   
   /* mengambil data produk nya */
   $sqldata  = "select * from product LIMIT $start , $limit";
   if($res = $database->query($sqldata)) {
      
      while ($row = $res->fetch_assoc()) {
	   $data[] = $row;
	  }
   }
   /* @end mengambil data produknya */
   
   $result = array(
     'total' => $jmldata,
	 'rows'  => $data
   );
   echo json_encode($result);
   
   /* tutup koneksinya */
   $database->close();

Hasilnya kira-kira begini

Ditumpuk didalam berkas : Catatan Belajar , PHP
Yang berkomentar (5)
Setiap komentar yang tampil adalah hasil dari persetujuan Admin

Komentar untuk "Data Grid JeasyUI Paging - PHP"

mbah
20-02-2016 05:29

wuih.. keren dan..

Komentar via web

Balas
Danni Moring
20-02-2016 09:24

ngeledekkkk lo jaliii !!

Komentar via web

Balas
Dunia Ely
05-02-2016 17:27

Btw, yang ngerti dalam hal ini pasti suka ya Dann, jadi inget suamiku

Komentar via web

Balas
Danni Moring
05-02-2016 23:42

hehhehe wah kyknya aku perlu berguru ke suaminya mba nih...

Komentar via web

Balas
Dunia Ely
05-02-2016 17:26

Aku nyimak wae ya Dann

Komentar via web

Balas