Membuat datatable beserta jquery pop up dengan ajax load database (new)

Beranda
Komunitas
Tech
Website, Webmaster, Webdeveloper
Membuat datatable beserta jquery pop up dengan ajax load database (new)

milkyway29

07-09-2012 11:38

Membuat datatable beserta jquery pop up dengan ajax load database (new)

Agan agan, ane mau share script php, jquery, dan ajax untuk membuat datatable dimana data nya di salah satu kolom bisa ngelink untuk munculin pop up dan memanggil data dari database server menggunakan ajax.

Ni penampakan datatable nya gan,
[img]
http://kkcdn-static.kaskus.co.id/ima...0907040526.JPG
[/img]

Trus ini penampakan jquery pop up dengan menggunakan ajax untuk load data dari database server gan
[img]
http://kkcdn-static.kaskus.co.id/ima...0907041559.JPG
[/img]

Pertama, kita buat dulu databasenya gan..
disini ane buat dengan PhpMyadmin menggunakan web server XAMPP

Membuat datatable beserta jquery pop up dengan ajax load database (new)

Kedua, buat file dengan nama koneksi.php , ini scriptnya

Spoiler for koneksi.php:

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "data_cust";
$koneksi = mysql_connect($host,$user,$pass,true) or die(mysql_error());
mysql_select_db($db,$koneksi) or die(mysql_error());
?>

Ketiga, buat file dengan nama index.php .
Ini scriptnya gan...
Ini adalah bagian script yang di taroh di <head> ... </head> pada file index.php

Spoiler for index.php:

<html>
<head>


<link rel="stylesheet" type="text/css" href="css/smoothness/jquery-ui-1.8.13.custom.css" />
[removed][removed]
[removed]
[removed][removed]
<link rel="StyleSheet" href="css/style.css" type="text/css" />
<style type="text/css">
@import "media/css/demo_table_jui.css";
@import "media/themes/ui-lightness/jquery-ui-1.8.4.custom.css";
</style>

<style>
*{
font-family: arial;
}
</style>

[removed]
$(document).ready(function(){
$('#datatables' emoticon-Wink

.dataTable({
"sPaginationType":"full_numbers",
"aaSorting":[[2, "desc"]],
"bJQueryUI":true
});
})

[removed]



[removed]
function DataDetail(id){
$.ajax({
type:"POST",
url:"proses.php",
data: "id="+id,
success: function(data){
$("#info").html(data);
$("#info").dialog(
{
height: 500,width: 500,modal:true,
buttons: {
Close: function() {
$( this ).dialog('close' emoticon-Wink

;
}
}
});
}
});
}
[removed]


</head>

Ini adalah bagian script yang di taroh di <body> ... </body> pada index.php

Spoiler for index.php:

<body>
<div class="wrap">
<div class="header">
</div>

<?php
include("koneksi.php");
$query="SELECT * FROM data_customer_dbs";
$queryExe=mysql_query($query);
$view="
<table id='datatables' class='display'>
<thead>
<tr>
<th>NIP NAS</th>
<th>NAMA</th>
<th>BAM</th>
<th>NOTEL</th>
</tr>
</thead>
";
?>

<tbody>
<?
while($data=mysql_fetch_array($queryMhsExe)){
$view.= "
<tr>
<td>".$data['NIP_NAS_FINAL']."</td>
<td><a >".$data['STANDARD_NAME']."</a></td>
<td>".$data['BAM']."</td>
<td>".$data['NOTEL']."</td>
</tr>";
}
$view.="</table>";
echo $view;
?>

</tbody>
</table>


<div id="info"></div>
</body>
</html>

Lalu buat file yang berisi query yang direquest oleh ajax pada proses.php

Spoiler for proses.php:

<?php

include("koneksi.php");
$id=$_POST['id'];
$query=mysql_query("SELECT * FROM data_customer_dbs WHERE NOTEL = '$id' ");

$data=mysql_fetch_array($query);
echo "
<table>
<tr>
<td>Nip nas</td>
<td>:</td>
<td>".$data['NIP_NAS_FINAL']."</td>
</tr>
<tr>
<td>BAM</td>
<td>:</td>
<td>".$data['BAM']."</td>
</tr>
<tr>
<td>Nama</td>
<td>:</td>
<td>".$data['STANDARD_NAME']."</td>
</tr>
<tr>
<td>Notel</td>
<td>:</td>
<td>".$data['NOTEL']."</td>
</tr>
<tr>
<td>CS Area</td>
<td>:</td>
<td>".$data['CS_AREA']."</td>
</tr>
<tr>
<td>Client Name</td>
<td>:</td>
<td>".$data['CLIENT_NAME']."</td>
</tr>
<tr>
<td>Installation Name</td>
<td>:</td>
<td>".$data['INST_NAME']."</td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td>".$data['AD_ADDITIONALINFO']."</td>
</tr>
<tr>
<td>City</td>
<td>:</td>
<td>".$data['CITY']."</td>
</tr>
<tr>
<td>Komunitas</td>
<td>:</td>
<td>".$data['KOMUNITAS']."</td>
</tr>
<tr>
<td>Kelompok Komunitas</td>
<td>:</td>
<td>".$data['KELOMPOK_KOMUNITAS']."</td>
</tr>
<tr>
<td>POTS / SPEEDY</td>
<td>:</td>
<td>".$data['POTS_SPEEDY']."</td>
</tr>
</table>
";

?>

Sekian dulu info scriptnya gan,
mudah mudahan bisa ngebantu agan buat datatables yang datanya bisa request data yg lainnya dengan ajax dan jquery pop up untuk mempercantik tampilan.

Ni file file lengkapnya beserta file file javascript dan css nya nya bisa disedot gan
disini

yang merasa terbantu jangan lupa cendolnya gan
emoticon-Blue Guy Cendol (L)

7.9K

Kutip

Balasan

Komentar yang asik ya

Urutan

Terbaru

Terlama

Komentar yang asik ya

Komunitas Pilihan