Datatable adalah sebuah library berbasis Jquery yang dapat menampilkan data kedalam table dan mempunyai fitur Search, Order, paging dan lain-lain. Datatable juga dapat menampilkan data secara ajax dengan proses di server side. Tutorial kali ini saya akan membahasa cara menampilkan data secara Ajax server Side processing.
Disini saya akan membuat contoh Datatable Ajax dengan memakai Laravel.
Kenpa perlu menampilkan data secara Server Side, karena jika anda memiliki banyak data misalnya 1000rbuan++, maka jika anda mangambil semua data terlebih dahulu, kemudian di masukkan ke dalam tabel, maka proses aplikasi anda menjadi lambat, jika menggunakan server side, anda hanya mengambil data yang diperlukan saja, tidak harus menampilkan semua data, disertai dengan paging. Dan proses aplikasi anda akan cepat.
Silahkan download Sourcecodenya di bawah.
Intall Laravel
Step pertama yang akan kita lakukan adalah menginstall laravel, untuk menginstall laravel pastikan PC anda sudah terinstall Composer, jika belum menginstall composer, silahkan download
disini.
Kemudian Buka CMD dan tentukan lokasi dan Ketikkan perintah :
composer create-project --prefer-dist laravel/laravel datatable_tutorial
Tambahkan Library Server Side
Setelah selesai melakukan instalasi laravel, silahkan buka laravel projek anda dengan memakai Netbean, PHPStorm, atau editor lainnya. (
disini saya memakai PHPStorm ![🙂](https://s.w.org/images/core/emoji/2.2.1/svg/1f642.svg)
)
Kemudian download library yang sudah saya modifikasi di
Github. Download sebagai Zip kemudian extrak dan buatkan folder
server_side di
Vendor (Projek Laravel). Dan copykan file ssp.php yang sudah anda download tadi dari Github.
Buat Controller
Jika anda memakai Laravel, anda diharuskan untuk membuat controller terlebih dahulu. Silahkan ketikkan perintah dibawah untuk membuat controller baru :
php artisan make:controller TableController
Setelah selesai membuat controller, tambahkan controller tersebut ke route.php.
| <?php |
| |
| /* |
| |-------------------------------------------------------------------------- |
| | Application Routes |
| |-------------------------------------------------------------------------- |
| | |
| | Here is where you can register all of the routes for an application. |
| | It's a breeze. Simply tell Laravel the URIs it should respond to |
| | and give it the controller to call when that URI is requested. |
| | |
| */ |
| |
| Route::get('/', function () { |
| return view('welcome'); |
| }); |
| |
| Route::controllers([ |
| 'table'=>'TableController', |
| ]); |
Membuat dan konfigurasi database
Jika anda belum memiliki database, kita akan membuat database terlebih dahulu. Jika sudah memilik database anda juga bisa langsung memakai database yang sudah dibuat.
Ubah file .env, kemudian ubah koneksi ke datatabase anda.
Seperti ini :
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=datatable_tutorial
DB_USERNAME=root
DB_PASSWORD=
setelah selesai merubah koneksi db ketikkan perintah :
php artisan migrate
Menambahkan View, Model, Dan Controller
Disini kita akan menambahkan beberapa baris kode di view, model dan controller. Untuk projek kali ini saya akan coba memakai template
gentelella yang di share oleh om Nuris Akbar di web
belajarphp.net.
Silahkan download templatenya
disini.
untuk cara menambahkan template ke laravel saya tidak bahas disini. Silahkan download projek laravel yang sudah saya integrasikan dengan template gentelella.
Pada View table tambahkan Ajax seperti dibawah ini:
Table di View :
<table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>User ID</th>
<th>First name</th>
<th>Last name</th>
<th>Gender</th>
<th>Email</th>
<th>Ip Address</th>
<th>Created date</th>
</tr>
</thead>
<tbody></tbody>
</table>
//Jquery:
$('#datatable-responsive').DataTable({
"processing": true,
"serverSide": true,
"ajax": {
url: "{{action('TableController@anyData')}}",
type: 'GET'
}
});
| <?php |
| /** |
| * Created by PhpStorm. |
| * User: KHADAFI |
| * Date: 5/19/2016 |
| * Time: 9:49 AM |
| */ |
| |
| ?> |
|
|
|
|
| @extends('layout.home') |
|
|
| @section('title', 'Table Ajax Server side') |
|
|
| @section("content") |
| <div class="right_col" role="main"> |
| <div class=""> |
| <div class="page-title"> |
| <div class="title_left"> |
| <h3> |
| Datatable |
| <small> |
| Example of Ajax Server Side PHP |
| </small> |
| </h3> |
| </div> |
|
|
| <div class="title_right"> |
| <div class="col-md-5 col-sm-5 col-xs-12 form-group pull-right top_search"> |
| <div class="input-group"> |
| <input type="text" class="form-control" placeholder="Search for..."> |
| <span class="input-group-btn"> |
| <button class="btn btn-default" type="button">Go!</button> |
| </span> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div class="clearfix"></div> |
|
|
| <div class="row"> |
|
|
| <div class="col-md-12 col-sm-12 col-xs-12"> |
| <div class="x_panel"> |
| <div class="x_title"> |
| <h2>Datatable <small>Ajax</small></h2> |
| <ul class="nav navbar-right panel_toolbox"> |
| <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a> |
| </li> |
| <li class="dropdown"> |
| <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i class="fa fa-wrench"></i></a> |
| <ul class="dropdown-menu" role="menu"> |
| <li><a href="#">Settings 1</a> |
| </li> |
| <li><a href="#">Settings 2</a> |
| </li> |
| </ul> |
| </li> |
| <li><a class="close-link"><i class="fa fa-close"></i></a> |
| </li> |
| </ul> |
| <div class="clearfix"></div> |
| </div> |
| <div class="x_content"> |
| <p class="text-muted font-13 m-b-30"> |
| Contoh menggunakan datatable dengan ajax Server Side PHP. |
| </p> |
| <table id="datatable-responsive" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> |
| <thead> |
| <tr> |
| <th>User ID</th> |
| <th>First name</th> |
| <th>Last name</th> |
| <th>Gender</th> |
| <th>Email</th> |
| <th>Ip Address</th> |
| <th>Created date</th> |
| </tr> |
| </thead> |
| <tbody></tbody> |
| </table> |
|
|
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| @endsection |
|
|
| @section("javascript") |
| <!-- Datatables --> |
| <script src="{{url("")}}/plugins/datatables.net/js/jquery.dataTables.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-bs/js/dataTables.bootstrap.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-buttons/js/dataTables.buttons.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-buttons/js/buttons.flash.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-buttons/js/buttons.html5.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-buttons/js/buttons.print.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-keytable/js/dataTables.keyTable.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-responsive/js/dataTables.responsive.min.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script> |
| <script src="{{url("")}}/plugins/datatables.net-scroller/js/datatables.scroller.min.js"></script> |
| <script src="{{url("")}}/plugins/jszip/dist/jszip.min.js"></script> |
| <script src="{{url("")}}/plugins/pdfmake/build/pdfmake.min.js"></script> |
| <script src="{{url("")}}/plugins/pdfmake/build/vfs_fonts.js"></script> |
|
|
| <!-- Datatables --> |
| <script> |
| $(document).ready(function() { |
| |
| |
| |
| $('#datatable-responsive').DataTable({ |
| "processing": true, |
| "serverSide": true, |
| "ajax": { |
| url: "{{action('TableController@anyData')}}", |
| type: 'GET' |
| } |
| }); |
| |
| }); |
| </script> |
| <!-- /Datatables --> |
| @endsection |
|
|
| <?php |
| |
| namespace App\Http\Controllers; |
| |
| use Illuminate\Http\Request; |
| |
| use App\Http\Requests; |
| |
| class TableController extends Controller |
| { |
| // |
| public function getIndex(){ |
| return view("table.table"); |
| } |
| |
| public function anyData(){ |
| require base_path() . '/vendor/server_side/ssp.php'; |
| |
| |
| // DB table to use |
| $table = 'data_user tb'; |
| |
| // Table's primary key |
| $primaryKey = 'tb.id'; |
| |
| $where = ''; |
| |
| $join =' '; |
| |
| $columns = array( |
| |
| array('db' => 'tb.id as user_id', 'dt' => 0), |
| array('db' => 'tb.first_name', 'dt' => 1), |
| array('db' => 'tb.last_name', 'dt' => 2), |
| array('db' => 'tb.gender', 'dt' => 3), |
| array('db' => 'tb.email', 'dt' => 4), |
| array('db' => 'tb.ip_address', 'dt' => 5), |
| array('db' => 'tb.created_at', 'dt' => 6), |
| ); |
| |
| // SQL server connection information |
| $sql_details = array( |
| 'user' => env("DB_USERNAME"), |
| 'pass' => env("DB_PASSWORD"), |
| 'db' => env("DB_DATABASE"), |
| 'host' => env("DB_HOST") |
| ); |
| |
| echo json_encode( |
| \ssp::simple($_GET, $sql_details, $table, $primaryKey, $columns, $join, $where) |
| ); |
| } |
| } |
Pada table controller anda akan melihat beberapa fungsi dan parameter untuk mengambil data secara Ajax :
// Table yang ingin di tampilkan
$table = ‘data_user tb’;
// Table’s primary key
$primaryKey = ‘tb.id’;
$where = ”; // Jika anda ingin menambahkan kondisi, misalnya ‘ gender = ‘male’ ‘
$join =’ ‘; // jika anda memilik banyak table untuk join, misalnya ‘ join data_alamat al on al.user_id = tb.id ‘
//Untuk kolom yang ingin ditampilkan
//untuk table alias: array('db' => 'tb.id as user_id', 'dt' => 0),
$columns = array(
array('db' => 'tb.id as user_id', 'dt' => 0),
array('db' => 'tb.first_name', 'dt' => 1),
array('db' => 'tb.last_name', 'dt' => 2),
array('db' => 'tb.gender', 'dt' => 3),
array('db' => 'tb.email', 'dt' => 4),
array('db' => 'tb.ip_address', 'dt' => 5),
array('db' => 'tb.created_at', 'dt' => 6),
);
Dan setelah semuanya sudah anda masukkan, silahkan untuk dicoba di jalankan.
Jika sudah berhasil, maka anda akan melihat data keluar seperti video dibawah, bisa searching, Paging, Sorting, dll.
Sekian dari saya dan semoga bermanfaat.
Download Full Sourcecode Laravel + Template Gentella
Silahkan tinggalkan pesan jika ada pertanyaan atau bisa bertanya
disini.
Sumber : https://bisacoding.com/menampilkan-data-dengan-datatable-ajax-mysql/