 |
| datatable server-side bootstrap 4 export excel pdf dengan codeigniter |
Datatable sendiri merupakan plugin yang dimana kita bisa menampilkan data dengan tampilan UI dan UX lebih anggun. untuk menampilkan data di codeigniter dengan datatable ada dua Tutorial yaitu secara langung terapkan dari view atau lewat tampilkan datatable serverside.
Pada kesempatan ini aku akan memberikan tutorial Cara menampilkan data dari database memakai plugin datatable serverside menggunakan ajax, tanpa memakai library dari datatable seakan-akan Ignitable.
Ok, pribadi saja di sini saya mempunyai data dengan table. tbmhs. sebagai berikut :
 |
| table adminer laragon |
Di sini saya menggunakan adminer milik laragon bukan phpmyadmin, berikut data dari table tbmhs yang ingin di tampilkan dalam bentuk datatabe.
Silahkan lakukan konfigurasi dasar terlebih dahulu, seperti route, database, autoload, config. dan lain-lain. mampu di sini
ok disini saya membuat model terlebih dengan nama mdata.php
dengan coding seolah-olah berikut :
model mdata.php
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
class Mdata extends CI_Model
//tampil data
public function view_all($table)
$query = $this->db->get($table);
return $query->result();
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class Home extends CI_Controller
function __construct()
parent::__construct();
function tabel()
$data['title'] = 'DataTable';
// memanggil view full.php
$this->load->view('full',$data);
function datauser()
$fetch_data = $this->mdata->view_all('tbmhs');
$data = array();
$no=1;
foreach($fetch_data as $row)
$sub_array = array();
$sub_array[] = $no++;
$sub_array[] = $row->nim;
$sub_array[] = $row->nama;
$sub_array[] = $row->email;
$sub_array[] = '<button type="button" name="update" id="'.$row->nim.'" class="btn btn-info btn-xs update"><i class="fa fa-edit"></i></button> <button type="button" name="delete" id="'.$row->nim.'" class="btn btn-danger btn-xs delete"><i class="fa fa-trash"></i></button>';
$data[] = $sub_array;
$output = array(
"data" => $data
);
echo json_encode($output);
Dan berikut untuk tampilan atau view adalah full.php sebagai berikut :
<!doctype html>
<html lang="en">
<head>
<title><?php echo $title;?></title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.bootstrap4.min.css"/>
<noscript>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-light mb-5">
<ul class="nav navbar-nav">
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>">Home</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/content">Data</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/summer">WYSIWYG Summernote</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/page">Pagination</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/crop">Cropper</a></li>
<li class="nav-item"><a class="nav-link" href="<?php echo base_url();?>home/label">Label</a></li>
</ul>
</nav>
<div class="container">
<h3>Crud Edit & Delete</h3><hr/>
<div id="info"></div>
<div class="table-responsive">
<table id="user_data" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>NO</th>
<th>NIM</th>
<th>Nama</th>
<th>Email</th>
<th>Action</th>
</tr>
</thead>
</table>
</div>
</div>
<div id="userModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Edit Data</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<?php echo form_open('home/updata', 'id="mydata1" '); ?>
<div class="form-group">
<input type="text" class="form-control" name="nim" id="nim" placeholder="Enter NIM" readonly/>
</div>
<div class="form-group">
<input type="text" class="form-control" name="nama" id="nama" placeholder="Enter Nama">
<small id="NamaHelp" class="form-text text-muted">Masukan nama lengkap anda.</small>
</div>
<div class="form-group">
<input type="email" class="form-control" name="email" id="email" placeholder="Enter email">
</div>
<button type="submit" class="btn btn-primary">Update</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Javascripts-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="<?php echo base_url();?>asset/bootbox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script>
<script src="<?php echo base_url();?>asset/custom.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.colVis.min.js"></script>
</body>
</html>
Dan berikut tampilan file JS untuk konfigurasi button atau tombol export pdf, csv, print, sebagai berikut :$(document).ready(function()
var dataTable1 = $('#user_data').DataTable(
"ajax":
url:"datauser",
type:"POST"
,
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'
]
);
$(document).on("click", ".delete", function(e)
var nim = $(this).attr("id");
e.preventDefault();
bootbox.confirm("Are you sure delete ?", function(result)
if (result)
$.ajax(
url:"delete_nim",
method:"POST",
data:nim:nim,
success:function(data)
dataTable1.ajax.reload();
);
);
);
$(document).on('click', '.update', function()
var nim = $(this).attr("id");
$.ajax(
url:"danim",
method:"POST",
data:nim:nim,
dataType:"json",
success:function(data)
$('#userModal').modal('show');
$('#nim').val(data.nim);
$('#nama').val(data.nama);
$('#email').val(data.email);
)
);
);
Ok berikut lampiran code untuk tutorial menciptakan datatable dengan button export, csv, pdf dan print bootstrap 4 CodeIgniter.semoga membantu, bila ada pertanyaan silahkan tinggalkan jejak di colum komentar..
download datatable bootatrap 4 export csv, pdf, print dengan codeIgniter
demo datatable bootatrap 4 export csv, pdf, print dengan codeIgniter
thanks, happy coding.
pass : serhamo.blogspot.com
Post a Comment