[trick] Membuat Data Grid dengan PHP dan Jquery Mobile

Bismillah…

langsung saja >>

siapkan databases:

lat2

dan dilanjutkan dengan kodingannya :

1.mobile.php


<!doctype html>
<html>
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 <title>Latihan</title>
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.2/themes/metro/easyui.css">
 <link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.2/themes/icon.css">
 <script type="text/javascript" src="jquery-easyui-1.3.2/jquery-1.8.0.min.js"></script>
 <script type="text/javascript" src="jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
</head>
<body>
 <table id="dg" title="Basic DataGrid"
 data-options="singleSelect:true,border:false,fit:true,fitColumns:true,scrollbarSize:0">
 <thead>
 <tr>
 <th data-options="field:'id',width:80">ID</th>
 <th data-options="field:'nama',width:100">Nama</th>
 <th data-options="field:'password',width:100,align:'right'">Password</th>
 <th data-options="field:'status',width:80,align:'right'">Status</th>
 </tr>
 </thead>
 </table>
 <script>
 $(function(){
 $('#dg').datagrid({

 url:'data.php',
 columns:[[
 {field:'id',title:'id',width:30},
 {field:'nama',title:'Nama',width:90},
 {field:'password',title:'Password',width:500,align:'left'},
 {field:'status',title:'Status',width:100,align:'left'}
 ]]
 });
 });
 </script>
 <style scoped>
 .panel-title{
 text-align:center;
 font-size:14px;
 font-weight:bold;
 text-shadow:0 -1px rgba(0,0,0,0.3);
 }
 .datagrid-row,.datagrid-header-row{
 height:35px;
 }
 .datagrid-body td{
 border-right:1px dotted transparent;
 border-bottom:1px dotted transparent;
 }
 </style>
</body>
</html>

2. json,php


<?php
 $page = isset($_POST['page']) ? intval($_POST['page']) : 1;
 $rows = isset($_POST['rows']) ? intval($_POST['rows']) : 10;
 $offset = ($page-1)*$rows;
 $result = array();

mysql_connect("localhost","root","");mysql_select_db("oop");

 $rs = mysql_query("select count(*) from user");
 $row = mysql_fetch_row($rs);
 $result["total"] = $row[0];
 $rs = mysql_query("select * from user limit $offset,$rows");

 $items = array();
 while($row = mysql_fetch_object($rs)){
 array_push($items, $row);
 }
 $result["rows"] = $items;

echo json_encode($result);

?>

dan hasilnya kira-kira seperti ini >

lat

ini menggunakan emulator opera ya. silahkan di googling aja.. banyak kok di internet

selamat mencoba.

download sourcecode disini

 

Leave a comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: