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

Iklan