Hi. kali ini gw mau sharing buat para pengguna datatable..
Sharing gw kali ini adalah, Bagaimana cara menggunakan datatable dengan konsep Server Side
Sesuai dengan judul penulis menggunaka semantic ui,,
Semantic ui memiliki fitur yang baik buat para pengguna datatable karena sudah responsive tanpa menggunkan framework bootstrap,
Ok kita langsung saja ke pembahasan Menggunakan Datatable Ajax Server Side Semantic UI.
Persiapan Database :
create database semantic ;
use semantic;
DROP TABLE IF EXISTS `tbl_data`;
CREATE TABLE `tbl_data` (
`nama` varchar(255) DEFAULT NULL,
`alamat` varchar(255) DEFAULT NULL,
`jk` varchar(255) DEFAULT NULL,
`jabatan` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
CREATE TABLE `tbl_data` (
`nama` varchar(255) DEFAULT NULL,
`alamat` varchar(255) DEFAULT NULL,
`jk` varchar(255) DEFAULT NULL,
`jabatan` varchar(255) DEFAULT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
Silahkan Dummy Bebas
Struktur folder project Latihan
- Script File index.php
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.semanticui.min.css">
<title>SEMANTIC UI</title>
</head>
<body>
<div style="margin: 10px">
<H2>DATATABLE AJAX SERVER SIDE SEMANTIC UI</H2>
<table id="grid" class="ui celled table" cellspacing="0" width="100%">
<thead class="bg-cyan" >
<tr>
<th>No</th>
<th>Nama </th>
<th>Alamat</th>
<th>JK</th>
<th>Jabatan</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.semanticui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var dataTable = $('#grid').DataTable( {
"processing": false,
"serverSide": true,
"responsive":true,
"ajax":{
url :"datatable.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$("#grid_processing").css("display","none");
}
}
});
});
</script>
</body>
</html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/dataTables.semanticui.min.css">
<title>SEMANTIC UI</title>
</head>
<body>
<div style="margin: 10px">
<H2>DATATABLE AJAX SERVER SIDE SEMANTIC UI</H2>
<table id="grid" class="ui celled table" cellspacing="0" width="100%">
<thead class="bg-cyan" >
<tr>
<th>No</th>
<th>Nama </th>
<th>Alamat</th>
<th>JK</th>
<th>Jabatan</th>
</tr>
</thead>
</table>
</div>
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/dataTables.semanticui.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var dataTable = $('#grid').DataTable( {
"processing": false,
"serverSide": true,
"responsive":true,
"ajax":{
url :"datatable.php", // json datasource
type: "post", // method , by default get
error: function(){ // error handling
$("#grid_processing").css("display","none");
}
}
});
});
</script>
</body>
</html>
- Script datatable.php
#Inisialisasi koneksi ke database dengan mysqli extension
$host = "localhost";
$username = "root";
$password = "";
$database = "semantic";
$conn = mysqli_connect($host, $username, $password, $database) or die("Connection failed: " . mysqli_connect_error());
#end koneksi
// Menyimpan Permintaan (ie, get/post) Array secara global ke variabel
$requestData= $_REQUEST;
$columns = array(
// datatable column index => kolom nama database
0 => 'nama',
1 => 'alamat',
2 => 'jk',
3 => 'jabatan',
);
// mendapatkan jumlah total tanpa pencarian apapun atau search kosong
$sql = "SELECT * ";
$sql.=" FROM tbl_data ";
$query=mysqli_query($conn, $sql) or die(' Query gagal');
$totalData = mysqli_num_rows($query);
$totalFiltered = $totalData; // Bila tidak ada parameter pencarian maka jumlah baris = jumlah baris yang tersaring.
$sql = "SELECT * ";
$sql.=" from tbl_data where 1=1 ";
if( !empty($requestData['search']['value']) ) { // jika ada parameter pencarian, $requestData ['search'] ['value'] berisi parameter pencarian misalkan kata "Ahmad" maka value bernilai "Ahmad"
$sql.=" AND ( nama LIKE '%".$requestData['search']['value']."%'";
$sql.=" OR alamat LIKE '%".$requestData['search']['value']."%'";
$sql.=" OR jk LIKE '%".$requestData['search']['value']."%'";
$sql.=" OR jabatan LIKE '%".$requestData['search']['value']."%')";
}
$query=mysqli_query($conn, $sql) or die("Query Gagal");
$totalFiltered = mysqli_num_rows($query); // ketika ada parameter pencarian maka kita harus memodifikasi jumlah baris yang disaring sesuai hasil pencarian.
$sql.=" ORDER BY ". $columns[$requestData['order'][0]['column']]." ".$requestData['order'][0]['dir']." LIMIT ".$requestData['start']." ,".$requestData['length']." ";
/* $requestData['order'][0]['column'] berisi indeks kolom, $requestData['order'][0]['dir'] berisi pesanan seperti asc/desc */
$query=mysqli_query($conn, $sql) or die("grid.php: get tbl_user");
$data = array();
$i=1;
while( $row=mysqli_fetch_array($query) ) { // menyiapkan sebuah array
$nestedData=array();
$nestedData[] = $i++;
$nestedData[] = $row["nama"];
$nestedData[] = $row["alamat"];
$nestedData[] = $row["jk"];
$nestedData[] = $row["jabatan"];
$data[] = $nestedData;
}
$json_data = array(
"draw" => intval( $requestData['draw'] ), // untuk setiap request / draw oleh clientside, data akan mengirim sebuah angka sebagai parameter, ketika draw menerima respon / data yang pertama di periksa pada nomor draw, jadi akan mengirimkan nomor yang sama dengan hasil draw.
"recordsTotal" => intval( $totalData ), // Menampilkan total dari record hasil pencarian atau tidak ada pencarian apapun
"recordsFiltered" => intval( $totalFiltered ), // total recoed setelah pencarian, jika tidak ada pencarian mana totalFiltered = totalData
"data" => $data // total data pada array
);
echo json_encode($json_data); // mengirimkan data dengan formaat json
?>
Jalankan project pada browser maka Hasilnya akan sebagai berikut
dalam scala normal
So bagaimana temen2? good looking bukan?
bagi temen2 yg baru tau dan akan menggunakannya silahkan pelajari scriptnya / copas script, kalo faham di jamin 100% berjalan dengan baik,,
Ooopps Sebentar? kawan2 pusing sama skripnya
yok download Disini Iyya Disini..
semoga bermanfaat teman2.
0 komentar:
Posting Komentar