Beranda / colom / table

Membuat Table Frozen Columns dengan JQuery dan PHP

Oleh Juniawan89 Posting Komentar

Cara membuat tabel Frozen Columns




Buat Javascript nya :

<script>
$('#tt').datagrid({
title:'Frozen Columns',
iconCls:'icon-save',
width:500,
height:500,
url:'data.php',
frozenColumns:[[
{field:'NO',title:'NO',width:80},
{field:'NAMA',title:'Nama',width:80},
]],
columns:[[
{field:'jml',title:'Jumlah',width:80,align:'right'},
{field:'bln',title:'Bulan',width:80,align:'right'},
{field:'thn',title:'Tahun',width:100}
]]
});
</script>


Kemudian untuk menampilkan nya :

<table id="tt" title="juniawan89" class="easyui-datagrid" style="width:500px;height:500px"
url="data.php"
singleSelect="true" iconCls="icon-save">
<thead frozen="true">
<tr>
<th field="NO" width="80">NO</th>
<th field="NAMA" width="80">Nama</th>
</tr>
</thead>
<thead>
<tr>
<th field="jml" width="80" align="right">Jumlah</th>
<th field="bln" width="80" align="right">Bulan</th>
<th field="thn" width="150">Tahun</th>
</tr>
</thead>
</table>


Untuk memasukan data di dalam tabel, gunakan query dalam php :

<?
mysql_connect("localhost","root","");
mysql_select_db("database");

$cari="SELECT * from nm_tabel";
$hasil=mysql_query($cari);
while($data=mysql_fetch_row($hasil)){
echo"<tr align=\"left\" bgcolor=\"#FFF\">
<td>$data[0]</td>
<td align=\"center\">$data[1]</td>
<td align=\"center\">$data[2]</td>
<td>$data[3]</td>
<td>$data[4]</td>
</tr>";
}
?>


Kode lengkapnya seperti ini :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="css.css">
<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.easyui.min.js"></script>
<title>Juniawan89.blogspot.com</title>
</head>
<body>

<script>
$('#tt').datagrid({ 
title:'Frozen Columns', 
iconCls:'icon-save', 
width:500, 
height:500, 
url:'data.php', 
frozenColumns:[[ 
{field:'NO',title:'NO',width:80}, 
{field:'NAMA',title:'Nama',width:80}, 
]], 
columns:[[ 
{field:'jml',title:'Jumlah',width:80,align:'right'}, 
{field:'bln',title:'Bulan',width:80,align:'right'}, 
{field:'thn',title:'Tahun',width:100} 
]] 
}); 
</script>

<table id="tt" title="COBA by JUN GABENK" class="easyui-datagrid" style="width:500px;height:500px"
url="data.php"
singleSelect="true" iconCls="icon-save">
<thead frozen="true">
<tr>
<th field="id_kec" width="80">ID KEC</th>
<th field="id_kab" width="80">ID KAB</th>
</tr>
</thead>
<thead>
<tr>
<th field="jml" width="80" align="right">Jumlah</th>
<th field="bln" width="80" align="right">Bulan</th>
<th field="thn" width="150">Tahun</th>
</tr>
</thead>

<?
mysql_connect("localhost","root","");
mysql_select_db("database");

$cari="SELECT * from ms_penjualan";
$hasil=mysql_query($cari);
while($data=mysql_fetch_row($hasil)){
echo"<tr align=\"left\" bgcolor=\"#FFF\">
<td>$data[0]</td>
<td align=\"center\">$data[1]</td>
<td align=\"center\">$data[2]</td>
<td>$data[3]</td>
<td>$data[4]</td>
</tr>";
}
?>

</table>
</body>
</html>

Download code lengkap disini

Selesai...
Semoga Bermanfaat....
















Tidak ada komentar untuk "Membuat Table Frozen Columns dengan JQuery dan PHP"

Posting Komentar

Pengunjung yang baik selalu memberikan masukan / komentar..