Code PHP Membuat Dinamik Data Pada DataTables, Bootstrap + CRUD

Membuat Dinamik Data Pada DataTables, Bootstrap + CRUD

posted by Unknown on 8:06 AM 117 comments PHP

Mempunyai Data sampe Ribuan atau Puluhan Ribu Baris ?
pasti akan berat ketika akses page data tersebut, mungkin ketika di akses data ter-load semua dan itu akan menguras bandwith hosting/server anda :(
bahkan bisa membuat browser anda not responding :v

A : Bagaimana caranya ketika di akses data anda yang sangat banyak itu tidak berat ?
apakah ada triknya ?

B : Ada donk Triknya, yuk simak :)

*Yang Dibutuhkan

Komputer/Laptop pasti itu mah :)
XAMPP / WAMPP.
Notepad ++ / Sublime / Dreamweaver.
Script Data Tables bisa di download disini.
Script Bootstrap bisa di download disini (Klik download yang pojok kiri ya)

Yuk kita mulai :D

1. Download script Data Tables, dan Bootstrap terlebih dahulu.

2. Nyalakan XAMPP, perlu di ketahui penulis memakai XAMPP versi V 1.8
PHP menggunakan versi 5.4. XAMPP bisa di download disini

3. Setelah di download script Data Tables, buat 1 folder "datatablesku" lalu buat 1 folder lagi
yaitu "assets" lalu extract file script Data Tables yang sudah di download, lalu masukin
isi script tersebut kedalam folder "assets" kira kira seperti ini :)

4. Setelah di download script Bootsrap, buka folder "assets" buat folder "bootsrap"
lalu extract file script Bootsrap yang sudah di download, lalu masukin isi script tersebut
kedalam folder "bootsrap" kira kira seperti ini :)

5. Buka PhpMyAdmin, buat database baru dengan nama "datatables_ku" setelah itu
buka link ini lalu klik menu SQL, copy dan paste script pada link yang saya berikan
di text box SQL. Lalu klik kirim.

WARNING !!!

Tahap selanjutnya akan membahas tentang coding, pastikan pikiran sedang fresh, tidak banyak pikiran dll. Pastikan anda mengerti kodingan yang akan di bahas, jangan hanya copas lalu anda tidak mengerti inti dari coding yang di bahas, jika ada yang kurang/tidak mengerti atau penulis melakukan kesalahan. Silahkan komentar :)

6. Pada folder "datatables_ku" buat file bernama "index.php" dengan script sebagai berikut


<HTML>
 <HEAD>
  
  <!-- JQUERY -->
  <script type="text/javascript" language="javascript" src="assets/media/js/jquery.js"></script>
  
  <!-- BOOTSTRAP -->
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
  
  <!-- Optional theme -->
  <link rel="stylesheet" href="assets/bootstrap/css/bootstrap-theme.min.css">
  
  <!-- Latest compiled and minified JavaScript -->
  <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  
  <!-- DataTables -->
  <link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.bootstrap.css">
  <link rel="stylesheet" type="text/css" href="assets/media/css/dataTables.responsive.css">
  <script type="text/javascript" language="javascript" src="assets/media/js/jquery.dataTables.js"></script>
  <script type="text/javascript" language="javascript" src="assets/media/js/dataTables.responsive.js"></script>
  <script type="text/javascript" language="javascript" src="assets/media/js/dataTables.bootstrap.js"></script>
  <script type="text/javascript" language="javascript" src="assets/media/js/common.js"></script>
  <script type="text/javascript" language="javascript" >
   
   var dTable;
   // #Example adalah id pada table
   $(document).ready(function() {
    dTable = $('#example').DataTable( {
     "bProcessing": true,
     "bServerSide": true,
     "bJQueryUI": false,
     "responsive": true,
     "sAjaxSource": "serverSide.php", // Load Data
     "sServerMethod": "POST",
     "columnDefs": [
     { "orderable": false, "targets": 0, "searchable": false },
     { "orderable": true, "targets": 1, "searchable": true },
     { "orderable": true, "targets": 2, "searchable": true },
     { "orderable": true, "targets": 3, "searchable": true },
     { "orderable": true, "targets": 4, "searchable": true }
     ]
    } );
    
    $('#example').removeClass( 'display' ).addClass('table table-striped table-bordered');
    $('#example tfoot th').each( function () {
     
     //Agar kolom Action Tidak Ada Tombol Pencarian
     if( $(this).text() != "Action" ){
      var title = $('#example thead th').eq( $(this).index() ).text();
      $(this).html( '<input type="text" placeholder="Search '+title+'" class="form-control" />' );
     }
    } );
    
    // Untuk Pencarian, di kolom paling bawah
    dTable.columns().every( function () {
     var that = this;
     
     $( 'input', this.footer() ).on( 'keyup change', function () {
      that
      .search( this.value )
      .draw();
     } );
    } );
   } );
   
   
  </script>
 </HEAD>
 <BODY>
  <div class="container-fluid">
   <div class="row">
    <div class="col-md-12">
     <button onClick="showModals()" class="btn btn-primary">Tambah Data</button>
     <br>
     <hr>
     <br>
     <table id="example"  cellpadding="0" cellspacing="0" border="0" class="display" width="100%">
      <thead>
       <tr>
        <th>Action</th>
        <th>Userid</th>
        <th>Real Name</th>
        <th>NPM</th>
        <th>KELAS</th>
       </tr>
      </thead>
      <tbody>
      </tbody>
      <tfoot>
       <th>Action</th>
       <th>Userid</th>
       <th>Real Name</th>
       <th>NPM</th>
       <th>KELAS</th>
      </tfoot>
     </table>
    </div>
   </div>
  </div>
  
  <!-- Modal Popup -->
  <div class="modal fade" id="myModals" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
    <div class="modal-content">
     <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <h4 class="modal-title" id="myModalLabel">Add User</h4>
     </div>
     <div class="modal-body">
      
      <div class="alert alert-danger" role="alert" id="removeWarning">
       <span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
       <span class="sr-only">Error:</span>
       Anda yakin ingin menghapus user ini
      </div>
      <br>
      <form class="form-horizontal" id="formUser">
       
       <input type="hidden" class="form-control" id="id" name="id">
       <input type="hidden" class="form-control" id="userid" name="userid">
       <input type="hidden" class="form-control" id="type" name="type">
       
       <div class="form-group">
        <label for="real_name" class="col-sm-2 control-label">Nama User</label>
        <div class="col-sm-10">
         <input type="text" class="form-control" id="real_name" name="real_name" >
        </div>
       </div>
       <div class="form-group">
        <label for="npm" class="col-sm-2 control-label">NPM</label>
        <div class="col-sm-10">
         <input type="text" class="form-control" id="npm" name="npm" >
        </div>
       </div>
       <div class="form-group">
        <label for="kelas" class="col-sm-2 control-label">Kelas</label>
        <div class="col-sm-10">
         <textarea type="text" class="form-control" id="kelas" name="kelas" ></textarea>
        </div>
       </div>
      </form>
      
     </div>
     <div class="modal-footer">
      <button type="button" onClick="submitUser()" class="btn btn-default" data-dismiss="modal">Submit</button>
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     </div>
    </div>
   </div>
  </div>
  
  <script>
  
      //Tampilkan Modal 
   function showModals( id )
   {
    waitingDialog.show();
    clearModals();
    
    // Untuk Eksekusi Data Yang Ingin di Edit atau Di Hapus 
    if( id )
    {
     $.ajax({
      type: "POST",
      url: "crud.php",
      dataType: 'json',
      data: {id:id,type:"get"},
      success: function(res) {
       waitingDialog.hide();
       setModalData( res );
      }
     });
    }
    // Untuk Tambahkan Data
    else
    {
     $("#myModals").modal("show");
     $("#myModalLabel").html("New User");
     $("#type").val("new"); 
     waitingDialog.hide();
    }
   }
   
   //Data Yang Ingin Di Tampilkan Pada Modal Ketika Di Edit 
   function setModalData( data )
   {
    $("#myModalLabel").html(data.real_name);
    $("#id").val(data.id);
    $("#type").val("edit");
    $("#userid").val(data.userid);
    $("#real_name").val(data.real_name);
    $("#npm").val(data.npm);
    $("#kelas").val(data.kelas);
    $("#myModals").modal("show");
   }
   
   //Submit Untuk Eksekusi Tambah/Edit/Hapus Data 
   function submitUser()
   {
    var formData = $("#formUser").serialize();
    waitingDialog.show();
    $.ajax({
     type: "POST",
     url: "crud.php",
     dataType: 'json',
     data: formData,
     success: function(data) {
      dTable.ajax.reload(); // Untuk Reload Tables secara otomatis
      waitingDialog.hide(); 
     }
    });
   }
   
   //Hapus Data
   function deleteUser( id )
   {
    clearModals();
    $.ajax({
     type: "POST",
     url: "crud.php",
     dataType: 'json',
     data: {id:id,type:"get"},
     success: function(data) {
      $("#removeWarning").show();
      $("#myModalLabel").html("Delete User");
      $("#id").val(data.id);
      $("#userid").val(data.userid);
      $("#type").val("delete");
      $("#real_name").val(data.real_name).attr("disabled","true");
      $("#npm").val(data.npm).attr("disabled","true");
      $("#kelas").val(data.kelas).attr("disabled","true");
      $("#myModals").modal("show");
      waitingDialog.hide();   
     }
    });
   }
   
   //Clear Modal atau menutup modal supaya tidak terjadi duplikat modal
   function clearModals()
   {
    $("#removeWarning").hide();
    $("#id").val("").removeAttr( "disabled" );
    $("#userid").val("").removeAttr( "disabled" );
    $("#real_name").val("").removeAttr( "disabled" );
    $("#npm").val("").removeAttr( "disabled" );
    $("#type").val("");
    $("#kelas").val("").removeAttr( "disabled" );
   }
   
  </script>
  
 </BODY>
</HTML>

index.php in Pastebin.Com Click Here

7. Setelah "index.php" maka buat file "serverSide.php" script ini untuk load data kita ke file
"index.php" berikut script nya.


<?php
 /**
  * Script:    DataTables server-side script for PHP 5.2+ and MySQL 4.1+
  * Notes:     Based on a script by Allan Jardine that used the old PHP mysql_* functions.
  *            Rewritten to use the newer object oriented mysqli extension.
  * Copyright: 2010 - Allan Jardine (original script)
  *            2012 - Kari Söderholm, aka Haprog (updates)
  * License:   GPL v2 or BSD (3-point)
 */
 mb_internal_encoding('UTF-8');
 
 /**
  * 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( 'id','userid', 'real_name', 'npm', 'kelas' ); //Kolom Pada Tabel
 
 // Indexed column (used for fast and accurate table cardinality)
 $sIndexColumn = 'id';
 
 // DB table to use
 $sTable = 'user'; // Nama Tabel
 
 // Database connection information
 $gaSql['user']     = 'root';
 $gaSql['password'] = '';   
 $gaSql['db']       = 'datatables_ku';  //Database
 $gaSql['server']   = 'localhost';   
 $gaSql['port']     = 3306; // 3306 is the default MySQL port
 
 // Input method (use $_GET, $_POST or $_REQUEST)
 $input =& $_POST;

 $gaSql['charset']  = 'utf8';
 
 /**
  * MySQL connection
 */
 $db = new mysqli($gaSql['server'], $gaSql['user'], $gaSql['password'], $gaSql['db'], $gaSql['port']);
 if (mysqli_connect_error()) {
  die( 'Error connecting to MySQL server (' . mysqli_connect_errno() .') '. mysqli_connect_error() );
 }
 
 if (!$db->set_charset($gaSql['charset'])) {
  die( 'Error loading character set "'.$gaSql['charset'].'": '.$db->error );
 }
 
 
 /**
  * Paging
 */
 $sLimit = "";
 if ( isset( $input['iDisplayStart'] ) && $input['iDisplayLength'] != '-1' ) {
  $sLimit = " LIMIT ".intval( $input['iDisplayStart'] ).", ".intval( $input['iDisplayLength'] );
 }
 
 
 /**
  * Ordering
 */
 $aOrderingRules = array();
 if ( isset( $input['iSortCol_0'] ) ) {
  $iSortingCols = intval( $input['iSortingCols'] );
  for ( $i=0 ; $i<$iSortingCols ; $i++ ) {
   if ( $input[ 'bSortable_'.intval($input['iSortCol_'.$i]) ] == 'true' ) {
    $aOrderingRules[] =
                "`".$aColumns[ intval( $input['iSortCol_'.$i] ) ]."` "
                .($input['sSortDir_'.$i]==='asc' ? 'asc' : 'desc');
   }
  }
 }
 
 if (!empty($aOrderingRules)) {
  $sOrder = " ORDER BY ".implode(", ", $aOrderingRules);
  } else {
  $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
 */
 $iColumnCount = count($aColumns);
 
 if ( isset($input['sSearch']) && $input['sSearch'] != "" ) {
  $aFilteringRules = array();
  for ( $i=0 ; $i<$iColumnCount ; $i++ ) {
   if ( isset($input['bSearchable_'.$i]) && $input['bSearchable_'.$i] == 'true' ) {
    $aFilteringRules[] = "`".$aColumns[$i]."` LIKE '%".$db->real_escape_string( $input['sSearch'] )."%'";
   }
  }
  if (!empty($aFilteringRules)) {
   $aFilteringRules = array('('.implode(" OR ", $aFilteringRules).')');
  }
 }
 
 // Individual column filtering
 for ( $i=0 ; $i<$iColumnCount ; $i++ ) {
  if ( isset($input['bSearchable_'.$i]) && $input['bSearchable_'.$i] == 'true' && $input['sSearch_'.$i] != '' ) {
   $aFilteringRules[] = "`".$aColumns[$i]."` LIKE '%".$db->real_escape_string($input['sSearch_'.$i])."%'";
  }
 }
 
 if (!empty($aFilteringRules)) {
  $sWhere = " WHERE ".implode(" AND ", $aFilteringRules);
  } else {
  $sWhere = "";
 }
 
 
 /**
  * SQL queries
  * Get data to display
 */
 $aQueryColumns = array();
 foreach ($aColumns as $col) {
  if ($col != ' ') {
   $aQueryColumns[] = $col;
  }
 }
 
 $sQuery = "
    SELECT SQL_CALC_FOUND_ROWS `".implode("`, `", $aQueryColumns)."`
    FROM `".$sTable."`".$sWhere.$sOrder.$sLimit;
 
 $rResult = $db->query( $sQuery ) or die($db->error);
 
 // Data set length after filtering
 $sQuery = "SELECT FOUND_ROWS()";
 $rResultFilterTotal = $db->query( $sQuery ) or die($db->error);
 list($iFilteredTotal) = $rResultFilterTotal->fetch_row();
 
 // Total data set length
 $sQuery = "SELECT COUNT(`".$sIndexColumn."`) FROM `".$sTable."`";
 $rResultTotal = $db->query( $sQuery ) or die($db->error);
 list($iTotal) = $rResultTotal->fetch_row();
 
 
 /**
  * Output
 */
 $output = array(
    "sEcho"                => intval($input['sEcho']),
    "iTotalRecords"        => $iTotal,
    "iTotalDisplayRecords" => $iFilteredTotal,
    "aaData"               => array(),
 );
 
 // Looping Data
 while ( $aRow = $rResult->fetch_assoc() ) {
  $row = array();
  $btn = '<a href="#" onClick="showModals('.$aRow['id'].')">Edit</a> | <a href="#" onClick="deleteUser('.$aRow['id'].')">delete</a>';
  for ( $i=0 ; $i<$iColumnCount ; $i++ ) {
   $row[] = $aRow[ $aColumns[$i] ];
  }
  $row = array( $btn, $aRow['userid'], $aRow['real_name'], $aRow['npm'], $aRow['kelas'] );
  $output['aaData'][] = $row;
 }
 
 echo json_encode( $output );
 
?>

serverSide.php in Pastebin.Com Click Here

8. Nah script terakhir nih, yaitu membuat CRUD (CREATE, READ, UPDATE, DELETE)
Supaya datanya bisa di Tambah, Edit dan Di Hapus. Buat file "crud.php"
berikut scriptnya.


<?php
 //Connection Database
 $con = mysqli_connect("localhost","root","","datatables_ku");
 if (mysqli_connect_errno())
 {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
 }
 
 switch ($_POST['type']) {
  
  //Tampilkan Data 
  case "get":
   
   $SQL = mysqli_query($con, "SELECT * FROM user WHERE id='".$_POST['id']."'");
   $return = mysqli_fetch_array($SQL,MYSQLI_ASSOC);
   echo json_encode($return);
   break;
  
  //Tambah Data 
  case "new":
   
   $userid = date("ymdhis")."_".rand(0,10);
   $SQL = mysqli_query($con, 
         "INSERT INTO user SET 
          userid='".$userid."', 
          real_name='".$_POST['real_name']."', 
          npm='".$_POST['npm']."', 
          kelas='".$_POST['kelas']."'
        ");
   if($SQL){
    echo json_encode("OK");
   }
   break;
   
  //Edit Data 
  case "edit":
   
   $SQL = mysqli_query($con, 
         "UPDATE user SET 
          real_name='".$_POST['real_name']."', 
          npm='".$_POST['npm']."', 
          kelas='".$_POST['kelas']."'
         WHERE userid='".$_POST['userid']."'
        ");
   if($SQL){
    echo json_encode("OK");
   }   
   break;
   
  //Hapus Data 
  case "delete":
   
   $SQL = mysqli_query($con, "DELETE FROM user WHERE userid='".$_POST['userid']."'");
   if($SQL){
    echo json_encode("OK");
   }   
   break;
 } 
 
?>

crud.php in Pastebin.Com Click Here

Selesai deh lihat hasilnya gih :)

Hasilnya

UPDATE

Wah banyak yang tertarik ya, Malah ada yang nyaranin suruh bikin buku hahaha

Pada pengen tau cara join tablenya gimana hahaha. Nih sample/contoh cara join nya


<?php
                function mysqliConnection()
                        {              
                                // Database connection information
                                $gaSql['user']     = 'root';
                                $gaSql['password'] = '';  
                                $gaSql['db']       = 'datatables_ku';  //Database
                                $gaSql['server']   = 'localhost';  
                                $gaSql['port']     = 3306; // 3306 is the default MySQL port
                                $gaSql['charset']  = 'utf8';
                                $db = new mysqli($gaSql['server'], $gaSql['user'], $gaSql['password'], $gaSql['db'], $gaSql['port']);
                                if (mysqli_connect_error()) {
                                        die( 'Error connecting to MySQL server (' . mysqli_connect_errno() .') '. mysqli_connect_error() );
                                }
                               
                                if (!$db->set_charset($gaSql['charset'])) {
                                        die( 'Error loading character set "'.$gaSql['charset'].'": '.$db->error );
                                }
                                return $db;
                        }
                       
                function Paging( $input )
                        {
                                $sLimit = "";
                                if ( isset( $input['iDisplayStart'] ) && $input['iDisplayLength'] != '-1' ) {
                                        $sLimit = " LIMIT ".intval( $input['iDisplayStart'] ).", ".intval( $input['iDisplayLength'] );
                                }
                               
                                return $sLimit;
                        }
                       
                       
                function Ordering( $input, $aColumns )
                        {
                                $aOrderingRules = array();
                                if ( isset( $input['iSortCol_0'] ) ) {
                                        $iSortingCols = intval( $input['iSortingCols'] );
                                        for ( $i=0 ; $i<$iSortingCols ; $i++ ) {
                                                if ( $input[ 'bSortable_'.intval($input['iSortCol_'.$i]) ] == 'true' ) {
                                                        $aOrderingRules[] =
                                                        $aColumns[ intval( $input['iSortCol_'.$i] ) ]." "
                                                        .($input['sSortDir_'.$i]==='asc' ? 'asc' : 'desc');
                                                }
                                        }
                                }
                               
                                if (!empty($aOrderingRules)) {
                                        $sOrder = " ORDER BY ".implode(", ", $aOrderingRules);
                                        } else {
                                        $sOrder = "";
                                }
                                return $sOrder;
                        }
                       
                function Filtering( $aColumns, $iColumnCount, $input, $db )
                        {
                                if ( isset($input['sSearch']) && $input['sSearch'] != "" ) {
                                        $aFilteringRules = array();
                                        for ( $i=0 ; $i<$iColumnCount ; $i++ ) {
                                                if ( isset($input['bSearchable_'.$i]) && $input['bSearchable_'.$i] == 'true' ) {
                                                        $aFilteringRules[] = $aColumns[$i]." LIKE '%".$db->real_escape_string( $input['sSearch'] )."%'";
                                                }
                                        }
                                        if (!empty($aFilteringRules)) {
                                                $aFilteringRules = array('('.implode(" OR ", $aFilteringRules).')');
                                        }
                                }
                               
                                // Individual column filtering
                                for ( $i=0 ; $i<$iColumnCount ; $i++ ) {
                                        if ( isset($input['bSearchable_'.$i]) && $input['bSearchable_'.$i] == 'true' && $input['sSearch_'.$i] != '' ) {
                                                $aFilteringRules[] = $aColumns[$i]."  LIKE '%".$db->real_escape_string($input['sSearch_'.$i])."%'";
                                        }
                                }
                               
                                if (!empty($aFilteringRules)) {
                                        $sWhere = "WHERE ".implode(" AND ", $aFilteringRules);
                                        } else {
                                        $sWhere = "WHERE 1=1 ";
                                }
                                return $sWhere;
                        }
                       
 
        mb_internal_encoding('UTF-8');
        $aColumns = array('pv.nama_prov', 'kt.nama_kabkot', 'kc.nama_kec'); //Kolom Pada Tabel
       
        // Indexed column (used for fast and accurate table cardinality)
        $sIndexColumn = 'id_kec';
       
        // DB table to use
        $sTable = 'all_kecamatan'; // Nama Tabel
        $sTable2 = 'all_kabkot'; // Nama Tabel
        $sTable3 = 'all_provinsi'; // Nama Tabel
       
       
        // Input method (use $_GET, $_POST or $_REQUEST)
        $input =& $_POST;
 
       
        $iColumnCount = count($aColumns);
       
        $db = mysqliConnection();
        $sLimit = Paging( $input );
        $sOrder = Ordering( $input, $aColumns );
        $sWhere = Filtering( $aColumns, $iColumnCount, $input, $db );
       
        $aQueryColumns = array();
        foreach ($aColumns as $col) {
                if ($col != ' ') {
                        $aQueryColumns[] = $col;
                }
        }
       
        $sQuery = "
   SELECT SQL_CALC_FOUND_ROWS pv.id_prov, pv.nama_prov,  kt.id_prov, kt.id_kabkot, kt.nama_kabkot,  kc.id_kabkot, kc.id_kec, kc.nama_kec
   FROM ".$sTable2." AS kt
        inner join ".$sTable3." AS pv  on
        kt.id_prov=pv.id_prov
        inner join ".$sTable." AS kc  on
        kc.id_kabkot=kt.id_kabkot
        ".$sWhere.$sOrder.$sLimit;
       
       
        $rResult = $db->query( $sQuery ) or die($db->error);
        // Data set length after filtering
        $sQuery = "SELECT FOUND_ROWS()";
        $rResultFilterTotal = $db->query( $sQuery ) or die($db->error);
        list($iFilteredTotal) = $rResultFilterTotal->fetch_row();
       
        // Total data set length
        $sQuery = "SELECT COUNT(kc.".$sIndexColumn.") FROM ".$sTable." AS kc INNER JOIN ".$sTable2." AS kt ON kc.id_kabkot = kt.id_kabkot  INNER JOIN ".$sTable3." AS pv ON pv.id_prov = kt.id_prov";
        $rResultTotal = $db->query( $sQuery ) or die($db->error);
        list($iTotal) = $rResultTotal->fetch_row();
       
        /**
                * Output
        */
        $output = array(
    "sEcho"                => intval($input['sEcho']),
    "iTotalRecords"        => $iTotal,
    "iTotalDisplayRecords" => $iFilteredTotal,
    "aaData"               => array(),
        );
       
        // Looping Data
        while ( $aRow = $rResult->fetch_assoc() ) {
                $row = array();
               
                $row = array( $aRow['nama_prov'], $aRow['nama_kabkot'], $aRow['nama_kec']);
                $output['aaData'][] = $row;
        }
       
        echo json_encode( $output );
?>

joinServerSide.php in Pastebin.Com Click Here

DEMO

117 comments

UnknownJuly 5, 2015 at 11:23 PM
Gan, mau tanya kalo mau pake filternya gmn caranya sih.? kok g bisa ya.?
ReplyDelete
Replies
UnknownJuly 6, 2015 at 12:55 AM
Mksdnya.
Memfilter Field A to Z / Z to A dan angka kecil ke besar dan sebaliknya kah ?
kalo agan udh atur table yang ingin di tampilkan dan sudah berhasil muncul.
Codingan filternya juga bakal berfungsi kok, asal jgn di hapus aja codingan filter pada ServerSide.php
Demo nya bisa liat disini : http://lefgrin.com/tutorial/datatablesku/

ReplyDelete
Replies
UnknownJuly 6, 2015 at 11:39 AM
Makasih gan tutorialnya, ngebantu banget :D
ReplyDelete
Replies
irfanmuhlusterJuly 28, 2015 at 10:53 AM
memastikan saja.. mas di $("#userid").val(data.userid);
yang val(data.userid) itu data dalam databasenya kan?
ReplyDelete
Replies
irfanmuhlusterJuly 28, 2015 at 10:58 AM
kalau bagian data: {id:id,type:"get"}, yang mana yang database yang mana yang bukan?
ReplyDelete
Replies
UnknownJuly 28, 2015 at 11:14 PM
untuk case yang agan pertanyakan, tidak ada database gan
cuma metode pengiriman

{id:id,type:"get"}

id yang ke dua itu value nilai idnya
id yang pertama variable yang dikirim ke crud.php
get seperti metode pengirimannya

jadi jika agan menulis seperti ini

{idnya:id,type:"get"}

maka "idnya" yang akan di kirim ke crud.php
ReplyDelete
Replies
yudiana dan anieAugust 13, 2015 at 2:51 PM
gan,

kalo ane ambil editnya aja gimana gan?
mau tanya juga fungsi val (new), val (edit) itu gimana ya?
ReplyDelete
Replies
Indra HedarSeptember 15, 2015 at 1:37 AM
gan untuk inputan file kok tidak bisa ya? mohon petunjuknya
ReplyDelete
Replies
UnknownSeptember 16, 2015 at 5:10 PM
mas kalau loading lama setelah edit atau tambah itu karena apa ya? mohon bantuannya

Terima kasih :)
ReplyDelete
Replies
Hendi Santika's BlogOctober 1, 2015 at 9:49 AM
Mantabsss nich contoh nya.
Kumplit bangettt.

Tapi aku ada masalah nich.

Gak bisa loading datanya.

"Invalid JSON response" Katanya. Kenapa ya?

Mohon pencerahannya gan.

Syukron Kastiron
Terima Kasih Banyak
Hendi Santika
ReplyDelete
Replies
UnknownOctober 22, 2015 at 1:40 PM
nah q dah coba sih datatable ngebantu bgt, nah karena data dikantor bisa ratusan ribu akhirnya q pake yg server side karena ngelag klo datatable biasa. pertanyaannya, klo ingin import ke excel gimana ya. yg kebawa ga semuanya cuma dihalaman awal aja.
oiya seandainya untuk pencarian tiap kolom itu dibuat form tersendiri misal ditaro diatasnya gimana ya. jadi ga ditaro di masing2 kolom
ReplyDelete
Replies
nanoOctober 28, 2015 at 10:55 AM
bagaimana menampilkan data yang terdiri dari beberapa tabel (join) misal dalam tabel desa ada kode kecamatan, kode kecamatan ingin ditampilkan bukan nama kodenya tetapi nama kecamatannya dimana nama kecamatan ada dalam tabel kecamatan.
trims
ReplyDelete
Replies
UnknownNovember 2, 2015 at 8:08 PM
ini bukan sejenis framwork kan gan ??
ReplyDelete
Replies
DaryusmanNovember 26, 2015 at 4:47 PM
Ada error json knp ya..

Parse error: syntax error, unexpected ''.$aRow['' (T_CONSTANT_ENCAPSED_STRING) in C:\xampp\htdocs\datatablesku\serverSide.php on line 156

Parse error: syntax error, unexpected ''.$aRow['' (T_CONSTANT_ENCAPSED_STRING) in C:\xampp\htdocs\datatablesku\serverSide.php on line 156
ReplyDelete
Replies
adiDecember 16, 2015 at 10:31 AM
kalau menampilkan data berdasarkan kriteria tertentu dimana gan......
contooh :

SELECT * FROM nama_tabel WHERE field = kriteria
ReplyDelete
Replies
UnknownDecember 30, 2015 at 9:43 PM
terimakasih mas sangat membantu saya yang baru belajar :D
ReplyDelete
Replies
ghoblinJanuary 10, 2016 at 7:18 PM
Klo pake select option dari table lain gimana gan? misal ada kategorinya. mohon bantuannya.
ReplyDelete
Replies
Briandana RiznovJanuary 17, 2016 at 6:47 PM
makasih banyak mas tutornya sangat membantu

saya ada error invalid json itu karena apa ya mas?
seperti link dibawah errornya
https://goo.gl/K2pjQX

ini code index persis dengan punya mas
http://pastebin.com/AN7NeJ8K

untuk index, serverSide dll di taruh di folder yang sama kan gan maaf newbie
ReplyDelete
Replies
symbian-phoneJanuary 26, 2016 at 12:41 AM
bro, kalau saya tambah kolom trus jd muncul: DataTables warning: table id=example - Requested unknown parameter '5' for row 0. For more information about this error, please see http://datatables.net/tn/4 itu gimana bro? makasih
ReplyDelete
Replies
symbian-phoneJanuary 27, 2016 at 10:35 AM
thanks bro atas jawabannya, tanya lg.. kalau setting lebar kolom gimana ya? tak coba seting dari css gak bisa.

dan kalau kolom ada banyak yg terlihat kok ndak semua ya?.. contoh ada 10 kolom, yg terlihat cuma 8, kalau browser di zoom out baru keliatan semua. terimakasih.
ReplyDelete
Replies
kholisFebruary 9, 2016 at 10:34 PM
baru nemu tutorialnya.. makasih mas... mohon ijin nimba ilmu.... kalo di jadikan buku pasti saya beli ( cuma satu pastinya... ) makasih telah share ilmu....
ReplyDelete
Replies
UnknownFebruary 12, 2016 at 6:42 PM
Wah makasih banget gan tutorialnya membantu sekali
ReplyDelete
Replies
UnknownFebruary 25, 2016 at 7:47 PM
sangat membantu sekali gan. saya punya pertanyaan, kalo mau pake customer where gimana yah? saya coba menambahkan di $sWhere = xxx, berhasil, tapi pas pake search box nya, gagal. mohon petunjuknya gan, thank you

$Where = "realization_date <> \"\" ";
if (!empty($aFilteringRules)) {
$sWhere = " WHERE ".implode(" AND ", $aFilteringRules);
} else {
$sWhere = " WHERE " . $Where;
}
ReplyDelete
Replies
ArJuNaFebruary 25, 2016 at 9:45 PM
gan mau tanya. CRUD nya harus dibuat tiap tabel ya?
misalnya tabel pembeli dan Konsumen , masing masing Punya 1 ya gan?
ReplyDelete
Replies
UnknownMarch 15, 2016 at 1:53 PM
Gan, tolong ditambahin Validasi, baik saat tambah data maupun edit datanya. saya coba untuk tambahin sendiri tapi masih belum bisa. Maklum Newbie. Mohon dibantu gan. Terima Kasih.
ReplyDelete
Replies
UnknownMarch 21, 2016 at 1:00 PM
thanks untuk responnya. saya sudah coba gabungkan code dari tutorial ini dengan tutorial lainnya. dan berhasil.
ReplyDelete
Replies
an12.an23March 26, 2016 at 12:09 AM
tutorialnya sangat membantu gan.

saya sudah coba source codenya dan berhasil, tapi kenapa ya pas saya coba pakai db sendiri pas delete malah loading terus ? padahal data sudah berhasil ditampilkan
mohon bantuannya ya gan, terima kasih
ReplyDelete
Replies
UnknownMarch 28, 2016 at 12:20 PM
Mas...
Saya sudah coba script nya, langsung dari yang di kasih. tapi masih ada error JSON nya.
Ada pencerahan? Thx
ReplyDelete
Replies
JhonApril 9, 2016 at 11:05 PM
Mas mohon bantuannya,
bagaimana cara mengirim value ke modal untuk di edit khususnya pada radio button dan select option value
$("#real_name").val(data.real_name);// Untuk input type text Oc
$("#gender").val(data.sexo); // Untuk radio button pada modal tidak checked sesuai data sexo
$("#pilihan").val(data.level); // Untuk select option juga tidak terpilih pada option value selected pada modal...

Maaf newbie

Mohon bantuannya Mas...
ReplyDelete
Replies
UnknownApril 13, 2016 at 2:57 PM
Gan mau tanya dunk.. saya kan lagi buat P.O.S untuk toko saya menggunakan ci3 dan adminLTE dgn datatable serta modal. Permasalahannya pada menu pembelian bagaimana cara membuat bilangan terbilang dan total pembelian serta dicon gitu?

Jika berkenan mohon bantuannya gan. Mentok banget. Saya shar digithub ya berikut linknya

https://goo.gl/3l2RCm

Sebelumnya makasih ya gan
ReplyDelete
Replies
UnknownApril 13, 2016 at 3:40 PM
Gan mau tanya dunk.. saya kan lagi buat P.O.S untuk toko saya menggunakan ci3 dan adminLTE dgn datatable serta modal. Permasalahannya pada menu pembelian bagaimana cara membuat bilangan terbilang dan total pembelian serta dicon gitu?

Jika berkenan mohon bantuannya gan. Mentok banget. Saya shar digithub ya berikut linknya

https://goo.gl/3l2RCm

Sebelumnya makasih ya gan
ReplyDelete
Replies
Hariaty SimangunsongApril 15, 2016 at 9:48 AM
kak,,, mau tanya dong klo table nya tidak tampil kenapa yah, jadinya processing...

mohon bantunya kak, terimakasih
ReplyDelete
Replies
UnknownApril 15, 2016 at 2:59 PM
Bang ada export to excel gk soalnya nyari - nyari masih error juga
ReplyDelete
Replies
UnknownApril 18, 2016 at 1:45 PM
bang kok punya ane kagak bisa di sumbit, edit, hapus?
kalau mau di submit ada progress bar ga ilang2, edit tidak ada respon
ReplyDelete
Replies
Dwi CahyonoApril 22, 2016 at 9:44 AM
makasih mas kebetulan lagi nyari script spt ini
mau tanya ada referensi buat halaman loginnya?
ReplyDelete
Replies
UnknownMay 8, 2016 at 9:49 PM
gan artikelnya mantapp,, tapi ada yang kurang deh. qlo form input type:file gimana caranya gan ?soalnya pake $("#formUser").serialize(); ga bisa. ada solusi kah buat ngirim gambar pake script ini : function submitUser()
{
var formData = $("#formUser").serialize();
waitingDialog.show();
$.ajax({
type: "POST",
url: "crud.php",
dataType: 'json',
data: formData,
success: function (data) {
dTable.ajax.reload(); // Untuk Reload Tables secara otomatis
waitingDialog.hide();
}
});
}

tq gan, mohon pencerahan senpai...
ReplyDelete
Replies
UnknownMay 10, 2016 at 4:42 PM
sudah done gan problem nya, qlo mau nampilkan form dengan image pake modal, mending pake ajax tapi metode submit pake .prevendefault() . trs tombol submit di masukin ke dalem form, dan fungsi modal-dismis dihilangkan. solve !!!
ReplyDelete
Replies
UnknownMay 23, 2016 at 10:48 PM
Mantapp... sangat bermanfaat ilmunya buat pemula seperti saya.. :D makasih banyak Om.
ReplyDelete
Replies
BoimmiobJune 13, 2016 at 1:34 PM
Gan mau tanya dong...
kalo mau nampilin No. urutnya biar otomatis ditambahin apa ya??
mohon bantuannya..
ReplyDelete
Replies
GugelJune 26, 2016 at 12:46 PM
Thanks gan bermanfaat sekali,
gan mau tanya dong, sy bikin database dengan 9 kolom tetapi yang ditampilkan selalu 5 kolom saja, apa di script agan diatas memang sudah diatur hanya untuk menampilkan 5 kolom?
ReplyDelete
Replies
Fajar GumilarJune 29, 2016 at 1:32 PM
kenapa gan kok gini ya yang saya

"Invalid JSON response" Katanya. Kenapa ya?

Mohon pencerahannya gan.
ReplyDelete
Replies
dends7July 19, 2016 at 4:22 PM
yg joinserverside.php fungsi filtering nya kok error yah?
ReplyDelete
Replies
UnknownJuly 27, 2016 at 2:30 AM
Mau tanya, waitingdialog.show() itu bisa keluar darimana ya? dari bootstrap kah atau dari datatablesnya?

Terima Kasih..
ReplyDelete
Replies
UnknownJuly 27, 2016 at 4:06 PM
bisa upload yg terbaru ga file dan database yang update ma join table om ?
ReplyDelete
Replies
RachmadAugust 9, 2016 at 6:20 PM
gan, klo beda database yg d ganti d serverside.php mana aja ???
koq g berhasil y ???
ReplyDelete
Replies
UnknownSeptember 8, 2016 at 1:29 PM
Sangat Membantu Gan
Memastikan yang dii database yang mana ya?
userid='".$_POST['userid']
ReplyDelete
Replies
Denny AdminSeptember 13, 2016 at 11:37 AM
Work !!!
Berhasil :-)
Terimaksih banyak Gan,,,
Semoga ilmunya terus bermanfaat selamanya :-)
ReplyDelete
Replies
Denny AdminSeptember 13, 2016 at 11:38 AM
Work !!!
Berhasil :-)
Terimaksih banyak Gan,,,
Semoga ilmunya terus bermanfaat selamanya :-)
ReplyDelete
Replies
UnknownSeptember 16, 2016 at 3:19 PM
klw data nya di pakai untuk di menu dropdown gimana ya master?
sementara data yg di hasilkan hanya utk table
tq
ReplyDelete
Replies
modistSeptember 20, 2016 at 11:02 AM
gan mau tanya di file serverside.php itu kan ada table yang digunakan
$sTable, kalau saya ingin select lebih dari satu table seperti table pegawai sama jabatan itu bgaimana ya? mohon bantuannya gan
terimakasih
ReplyDelete
Replies
BoimmiobSeptember 21, 2016 at 10:54 PM
gan bisa nampilin Nomor urutnya gak ya? contoh 1-10, 11-20 dst...tks
ReplyDelete
Replies
BoimmiobSeptember 21, 2016 at 10:54 PM
gan bisa nampilin Nomor urutnya gak ya? contoh 1-10, 11-20 dst...tks
ReplyDelete
Replies
ms.rSeptember 28, 2016 at 9:21 AM
gan, ane udh coba. dan berhasil semua. tp pas instal ulang browser kok g muncul datanya ya?
ReplyDelete
Replies
UnknownSeptember 28, 2016 at 10:30 AM
Udh bisa saya coba ga, tapi saya mau nny klo query ini saya tambahkan tabel lain dan menampilkan ketika di edit itu bisa ga ya?

case "get":

$SQL = mysqli_query($con, "SELECT * FROM tbl_list_pekerjaan WHERE id='".$_POST['id']."'");
$return = mysqli_fetch_array($SQL,MYSQLI_ASSOC);
echo json_encode($return);

break;
ReplyDelete
Replies
sman1utapakis@gmail.comSeptember 28, 2016 at 11:08 AM
makasih tutorialnya gan
ReplyDelete
Replies
UnknownSeptember 30, 2016 at 2:24 PM
Master mau nny lagi, di query ini kan saya mau nampilih 2 tabel pas di edit malah load mulu ya, minta solusi.nya master
case "get":

$SQL = mysqli_query($con, "SELECT * FROM tbl_detail_list b, tbl_list_pekerjaan a WHERE id.a='".$_POST['id']."'");
$return = mysqli_fetch_array($SQL,MYSQLI_ASSOC);
echo json_encode($return);

break;
ReplyDelete
Replies
UnknownOctober 19, 2016 at 9:37 AM
mau tanya gan, bagaimana editnya jika di modal ada inut select?
ReplyDelete
Replies
infoterkiniOctober 21, 2016 at 8:37 AM
trims ya gan, atas tutorialnya
ReplyDelete
Replies
Denny AdminNovember 19, 2016 at 8:14 PM
nampilkan foto pada tabel gimana gan ?
ReplyDelete
Replies
UnknownDecember 14, 2016 at 12:56 AM
gan... ane tambahain kolomnya tapi.. pas edit dan tambah data ngak bisa "procesing.... terus".. kalau hapus data jalan
ReplyDelete
Replies
dfwfewfewfefDecember 17, 2016 at 2:17 PM
demo nya gak bisa om?
ReplyDelete
Replies
aangDecember 28, 2016 at 3:04 PM
gann, yang baik n super hebbat.
klo sya mau edit, search nya ada diatas gmn ya caranyaa? kaga dibawah.
pliss infonya.
ReplyDelete
Replies
rezaDecember 29, 2016 at 9:35 AM
mantap gan (y) , klo bisa tambahin cetak dokumen nya :D
ReplyDelete
Replies
yanukepbabelJanuary 5, 2017 at 5:27 PM
gan ditunggu update script dengan ditambah validasi apabila kosong atau apabila tidak sesuai keinginan misal text tertentu wajib angka dan bagaimana cara upload foto di form modal
ReplyDelete
Replies
UnknownJanuary 10, 2017 at 6:16 AM
Nuhub gan..
Ane kesulitan buat filtering id..
Kebetulan ane make auto generate id
Bukan auto_increment
Contohnya kaya gini gan
007/DP/ST/XII/16

Nah pas search id hasilnye no result

Kira kira yg ane mesti edit di file mana gan sama baris mana ya?
ReplyDelete
Replies
UnknownFebruary 1, 2017 at 6:35 PM
gan kalo mau buat checkbox di modal lalu saat menu(modal edit) terbuka checkbox tsb tampil "checked" sesuai value database dan dapat diedit perlu script apa yaa sekalian script untuk save ke serversidenya ya gan hehe thx
ReplyDelete
Replies
Pramono UtomoFebruary 23, 2017 at 10:39 PM
gan tanya dong, punya contoh kalau data yang di ambil dari stored procedure?
ReplyDelete
Replies