Jquery datatables : dynamic data, custom column, add link icon, open in facebox from id – part 3

**** Part  -3 : Add custom column ****

Tahapan berikutnya adalah menampilkan kolom kosong. Kolom kosong disini dimaksudkan untuk meletakkan link berupa icon atau tulisan seperti untuk operasi CRUD ataupun link ke eksternal file. Rencananya kolom kosong ini diletakkan di kolom paling kanan setelah kolom email. Dari beberapa referensi di website perubahan ada yang melakukannya di file email_data.php ataupun di file email_datatable.php (mengenai dua file ini silahkan buka part-1 dan part-2). Namun apa yang saya lakukan disini adalah cara yang saya cobakan 100% bisa dan mudah.

1. OK sekarang kita memakai logikanya dulu. kalau kita ingin menambahkan 1 kolom kosong di sebelah kanan, maka yang pertama kali kita sesuaikan adalah jumlah kolom di file email_datatable.php. Silahkan cari baris berikut :

<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th width=”20%”>id</th>
<th width=”20%”>Jenis</th>
<th width=”30%”>Nama</th>
<th width=”30%”>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”4″ class=”dataTables_empty”>Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>Jenis</th>
<th>Nama</th>
<th>Email</th>
</tr>
</tfoot>
</table>

 

menjadi ………….

<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th width=”20%”>id</th>
<th width=”20%”>Jenis</th>
<th width=”30%”>Nama</th>
<th width=”30%”>E-mail</th>
<th width=”30%”>Aksi</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”4″ class=”dataTables_empty”>Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>Jenis</th>
<th>Nama</th>
<th>Email</th>
<th>Aksi</th>
</tr>
</tfoot>
</table>

Tulisan yang berwarna hijau akan menambahkan satu kolom setelah kolom email.

2. Setelah kolom ditambahkan, kita memerintahkan jquery.datatables untuk mengenali kolom yang kita tambahkan. Silahkan cari baris berikut masih di file email_datatable.php

<script type=”text/javascript”>
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“bJQueryUI”: true,
“sAjaxSource”: “email_data.php”,
“sPaginationType”: “full_numbers”,
 “aoColumns”: [
            null,
            null,
            null,
            null,
           {    “mData”: null,
                “sClass”: “center”,
            }]
} );
} );
</script>

Tulisan berwarna hijau adalah script yang ditambahkan. Perintah ini adalah mendefinisikan masing-masing kolom dalam datatable. Kolom 1 s/d kolom 4 tidak ada pendefinisian khusus/seperti apaadanya sehingga diberi nilai null, sedangkan kolom 5 didefinisikan tidak ada data/kosong. Sehingga apabila berhasil, maka tampilannya akan seperti berikut ini (klik untuk memperbesar gambar).

19-04-2014 23-16-31

Bila sudah berhasil silahkan lanjut ke Part-4 tentang penambahan icon dan link di kolom yang kosong tadi.

Jquery datatables : dynamic data, custom column, add link icon, open in facebox from id – part 2

**** Part 2 : Call jquery datatables ****

Setelah berhasil memunculkan data array dari mysql, sebelum melanjutkan ke tahapan berikutnya, anda perlu mendownload

1. jquery.datatables. Versi sampai dengan tulisan ini ditulis adalah 1.9.4.

2. Latest jquery

3. Latest jquery-ui untuk tampilan interface-nya

OK setelah semua terdownload dan diasumsikan anda sudah tau lokasi penyimpanan dan cara pemanggilan data relatif terhadap root, kita perlu membuat file php untuk menampilkan data tbl_email kedalam format jquery.datatables. Misalnya kita membikin file dengan nama : email_datatable.php

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<link href=”demo_table_jui.css” rel=”stylesheet” type=”text/css” />
<link href=”jquery-ui-1.10.4.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”jquery-1.8.2.min.js”></script>
<script type=”text/javascript” src=”jquery-ui-1.10.4.min.js”></script>
<script type=”text/javascript” src=”jquery.dataTables.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
$(‘#example’).dataTable( {
“bProcessing”: true,
“bServerSide”: true,
“bJQueryUI”: true,
“sAjaxSource”: “email_data.php”,
“sPaginationType”: “full_numbers”,
} );
} );
</script>

</head>

<body>
<table cellpadding=”0″ cellspacing=”0″ border=”0″ class=”display” id=”example”>
<thead>
<tr>
<th width=”20%”>id</th>
<th width=”20%”>Jenis</th>
<th width=”30%”>Nama</th>
<th width=”30%”>E-mail</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan=”4″ class=”dataTables_empty”>Loading data from server</td>
</tr>
</tbody>
<tfoot>
<tr>
<th>id</th>
<th>Jenis</th>
<th>Nama</th>
<th>Email</th>
</tr>
</tfoot>
</table>
</body>
</html>

untuk lokasi file ini terhadap beberapa file css dan javascript tolong disesuaikan sendiri linknya :p. Bila semuanya lancar, seharusnya tampilannya akan seperti ini (klik untuk memperbesar)

19-04-2014 22-44-04

Jika sudah berhasil melakukan penampilan data seperti diatas, berarti anda sudah siap untuk lanjut ke Part-3

Jquery datatables : dynamic data, custom column, add link icon, open in facebox from id – part 1

**** Part 1 : Adding dynamic data ****

Beberapa hari ini lagi asik utak atik menggunakan jquery datatables (Mengenai jquery datatable silahkan mencari di mbah google). Sengaja judulnya aga aneh namun ini akan menggambarkan runtutan kebutuhan dari penggunaan jquery.datatables. Berbekal modal baca sana sini kemudian saya implementasikan kok berhasil, sehingga ada baiknya saya share disini, tetapi bukan berarti saya expert di bidang ini.

Skenarionya adalah saya ingin menampilkan data yang diambil dari database mysql menggunakan jquery.datatables. diujung kolom, ada kolom kosong yang akan saya isi untuk perintah berdasar id misalnya utuk operasi CRUD atau link ke eksternal data, atau saya bikin popup menggunakan facebox (silahkan googling aja apa facebox itu). Agak susah memang menemukan artikel yang terkait dengan hal ini apalagi yang mudah dipahami apalagi oleh saya yang masih awam ini. Sehingga nanti yang akan saya tampilkan sangatlah simple dan mudah dipahami (semoga hahaha).

1. OK tahapan yang pertama buat tabel di databasenya (saya tidak akan menjelaskan cara bikin tabel, kolom dalam tabel dll). Contohnya seperti ini : tbl_email

19-04-2014 22-07-53

2. Tahapan yang kedua adalah membuat file php berisi  array data dari tabel mysql. Contoh pemanggilan data dapat dilihat di situs resminya jquery.datatables. Kalau dikustomisasi sendiri berdasar tabel contoh menjadi sbb: (nama file email_data.php)


<!--?php
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* Easy set variables
*/

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( ’emid’, ‘grup’, ‘nama’, ’email’ );

/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = “emid”;

/* DB table to use */
$sTable = “tbl_email”;

/* Database connection information */
$gaSql[‘user’] = “nama_user”;
$gaSql[‘password’] = “nama_password”;
$gaSql[‘db’] = “nama_database”;
$gaSql[‘server’] = “localhost”;

/* REMOVE THIS LINE (it just includes my SQL connection user/pass)
include( $_SERVER[‘DOCUMENT_ROOT’].”/datatables/mysql.php” );*/

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
* If you just want to use the basic configuration for DataTables with PHP server-side, there is
* no need to edit below this line
*/

/*
* Local functions
*/
function fatal_error ( $sErrorMessage = ” )
{
header( $_SERVER[‘SERVER_PROTOCOL’] .’ 500 Internal Server Error’ );
die( $sErrorMessage );
}

/*
* MySQL connection
*/
if ( ! $gaSql[‘link’] = mysql_pconnect( $gaSql[‘server’], $gaSql[‘user’], $gaSql[‘password’] ) )
{
fatal_error( ‘Could not open connection to server’ );
}

if ( ! mysql_select_db( $gaSql[‘db’], $gaSql[‘link’] ) )
{
fatal_error( ‘Could not select database ‘ );
}

/*
* Paging
*/
$sLimit = “”;
if ( isset( $_GET[‘iDisplayStart’] ) && $_GET[‘iDisplayLength’] != ‘-1’ )
{
$sLimit = “LIMIT “.intval( $_GET[‘iDisplayStart’] ).”, “.
intval( $_GET[‘iDisplayLength’] );
}

/*
* Ordering
*/
$sOrder = “”;
if ( isset( $_GET[‘iSortCol_0’] ) )
{
$sOrder = “ORDER BY “;
for ( $i=0 ; $i<intval( $_GET[‘iSortingCols’] ) ; $i++ )
{
if ( $_GET[ ‘bSortable_’.intval($_GET[‘iSortCol_’.$i]) ] == “true” )
{
$sOrder .= “`”.$aColumns[ intval( $_GET[‘iSortCol_’.$i] ) ].”` “.
($_GET[‘sSortDir_’.$i]===’asc’ ? ‘asc’ : ‘desc’) .”, “;
}
}

$sOrder = substr_replace( $sOrder, “”, -2 );
if ( $sOrder == “ORDER BY” )
{
$sOrder = “”;
}
}

/*
* Filtering
* NOTE this does not match the built-in DataTables filtering which does it
* word by word on any field. It’s possible to do here, but concerned about efficiency
* on very large tables, and MySQL’s regex functionality is very limited
*/
$sWhere = “”;
if ( isset($_GET[‘sSearch’]) && $_GET[‘sSearch’] != “” )
{
$sWhere = “WHERE (“;
for ( $i=0 ; $i<count($aColumns) ; $i++ )
{
if ( isset($_GET[‘bSearchable_’.$i]) && $_GET[‘bSearchable_’.$i] == “true” )
{
$sWhere .= “`”.$aColumns[$i].”` LIKE ‘%”.mysql_real_escape_string( $_GET[‘sSearch’] ).”%’ OR “;
}
}
$sWhere = substr_replace( $sWhere, “”, -3 );
$sWhere .= ‘)’;
}

/* Individual column filtering */
for ( $i=0 ; $i<count($aColumns) ; $i++ ) { if ( isset($_GET[‘bSearchable_’.$i]) && $_GET[‘bSearchable_’.$i] == “true” && $_GET[‘sSearch_’.$i] != ” ) { if ( $sWhere == “” ) { $sWhere = “WHERE “; } else { $sWhere .= ” AND “; } $sWhere .= “`”.$aColumns[$i].”` LIKE ‘%”.mysql_real_escape_string($_GET[‘sSearch_’.$i]).”%’ “; } } /* * SQL queries * Get data to display */ $sQuery = ” SELECT SQL_CALC_FOUND_ROWS `”.str_replace(” , “, ” “, implode(“`, `”, $aColumns)).”` FROM $sTable $sWhere $sOrder $sLimit “; $rResult = mysql_query( $sQuery, $gaSql[‘link’] ) or fatal_error( ‘MySQL Error: ‘ . mysql_errno() ); /* Data set length after filtering */ $sQuery = ” SELECT FOUND_ROWS() “; $rResultFilterTotal = mysql_query( $sQuery, $gaSql[‘link’] ) or fatal_error( ‘MySQL Error: ‘ . mysql_errno() ); $aResultFilterTotal = mysql_fetch_array($rResultFilterTotal); $iFilteredTotal = $aResultFilterTotal[0]; /* Total data set length */ $sQuery = ” SELECT COUNT(`”.$sIndexColumn.”`) FROM $sTable “; $rResultTotal = mysql_query( $sQuery, $gaSql[‘link’] ) or fatal_error( ‘MySQL Error: ‘ . mysql_errno() ); $aResultTotal = mysql_fetch_array($rResultTotal); $iTotal = $aResultTotal[0]; /* * Output */ $output = array( “sEcho” => intval($_GET[‘sEcho’]),
“iTotalRecords” => $iTotal,
“iTotalDisplayRecords” => $iFilteredTotal,
“aaData” => array()
);

while ( $aRow = mysql_fetch_array( $rResult ) )
{
$row = array();
for ( $i=0 ; $i<count($aColumns) ; $i++ ) { if ( $aColumns[$i] == “version” ) { /* Special output formatting for ‘version’ column */ $row[] = ($aRow[ $aColumns[$i] ]==”0″) ? ‘-‘ : $aRow[ $aColumns[$i] ]; } else if ( $aColumns[$i] != ‘ ‘ ) { /* General output */ $row[] = $aRow[ $aColumns[$i] ]; } } $output[‘aaData’][] = $row; } echo json_encode( $output ); ?>

Perhatikan sesuaikan dengan informasi server anda pada script yang berwarna hijau. Kemudian coba jalankan file email_data.php di browser. Seharusnya  akan muncul tampilan array data seperti dibawah ini (klik gambar untuk memperbesar)

19-04-2014 22-24-13

Jika berhasil, berarti tahapan 1 sudah berhasil anda lewati. Silahkan melanjutkan ke Part – 2

Jquery : Show Hide Div menggunakan combo box

Tulisan kali ini akan mengulas mengenai Jquery. Pada dasarnya saya tidak mahir tentang jquery, hanya end user saja. Ada banyak sekali teknik yang terkait dengan show/hide sebuah tag div menggunakan jquery, tetapi setelah 2 hari surving ternyata belum menemui jawaban memuaskan untuk show/hide tag div dengan trigger dari combo box, sehingga dengan sedikit trial error, akhirnya bisa juga 🙂

Seperti biasa saya gunakan editor kesayangan dreamweaver, langkahnya

  1. Download jquery versi terakhir dan simpan dalam site direktori (terserah anda, dalam kasus saya, saya simpan file jquery di folder scripts).
  2. Buat sebuah combo box dengan id=menucombo. Selanjutnya tentukan value-nya dengan menekan tombol list value di property bar. Misal seperti ini
  3. Buat juga sebuah text area yang diapit tag div dengan id=area
  4. Buka source code view dan sisipkan script berikut di dalam tag <head>
  5. <script src=”../scripts/jquery-1.4.4.min.js”></script>
    <script>
    $(document).ready(function() {
    $(“#area”).css(“display”,”none”);
    $(“select#menucombo”).click(function() {
    if($(this).val() !== “tampil”){
    $(“#area”).hide(“slow”);
    }else{
    $(“#area”).show(“slow”);
    }
    });
    });</script>
  6. Selesai

Keterangan

$(“#area”).css(“display”,”none”); –> mengkondisikan textarea yang diapit tag div id=area untuk tidak ditampilkan.

$(“select#menucombo”).click(function() –> aktivasi perintah di menu combo box terjadi bila ada pemilihan dan trigger “click”

if($(this).val() !== “tampil”){
$(“#area”).hide(“slow”);
}else{
$(“#area”).show(“slow”);
}

–> menjelaskan bahwa jika value dari combo box TIDAK memiliki nilai “tampil” maka tag div id=area disembunyikan, bila tidak maka tag div id=area ditampilkan

Kode selengkapnya seperti ini

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;
<html xmlns=”http://www.w3.org/1999/xhtml”&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″ />
<title>Untitled Document</title>
<script src=”../scripts/jquery-1.4.4.min.js”></script>
<script>
$(document).ready(function() {
$(“#area”).css(“display”,”none”);
$(“select#menucombo”).click(function() {
if($(this).val() !== “tampil”){
$(“#area”).hide(“slow”);
}else{
$(“#area”).show(“slow”);
}
});
});

</script>
</head>

<body>
<form id=”form1″ name=”form1″ method=”post” action=””>
<select name=”menucombo” id=”menucombo”>
<option selected=”selected”>–pilih–</option>
<option value=”tampil”>tampil</option>
<option value=”hilang”>hilang</option>
</select>
<br />
<textarea name=”area” id=”area”></textarea>
</form>
</body>
</html>

Mudah-mudahan yang sedikit ini bermanfaat. Thx