Tutorial membuat datatable server side CodeIgniter bootstrap 4 export excel pdf print

pada kesempatan ini saya akan memberikan tutorial menggunakan datatable pada codeIgniter dan framework bootstrap 4 serta dengan menambah button copy, csv, excel, pdf, print datatables

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 bagus. untuk menampilkan data di codeigniter dengan datatable ada dua cara yaitu secara langung terapkan dari view atau lewat tampilkan datatable serverside.

Pada kesempatan ini saya akan memberikan tutorial cara menampilkan data dari database menggunakan plugin datatable serverside menggunakan ajax, tanpa menggunakan library dari datatable seperti Ignitable.

Ok, langsung saja di sini saya mempunyai data dengan table. tbmhs. sebagai berikut :

datatable bootstrap 4 export excel pdf dengan codeigniter

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. bisa di sini

ok disini saya membuat model terlebih dengan nama mdata.php
dengan coding seperti 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();
 }


}

dan untuk function controller dengan nama home.php, dengan function sebagai berikut :

<?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>&nbsp;<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 yaitu 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">&times;</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/buttons.html5.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 membuat datatable dengan button export, csv, pdf dan print bootstrap 4 CodeIgniter.
semoga membantu, jika 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 : fahmiffa.blogspot.com

rizkyyonathan9 June 2019 at 20:32
url : datauser itu dri mana ya?
Ron1 August 2019 at 19:41
min $data['title'] = 'DataTable'; itu dapat drmn ya ?
Ary12 March 2020 at 17:58
link download broken gan
Irwan19 July 2020 at 06:52
Jika memberikan full tutorial, harap juga dikasih create table dan insert data nya diatas, biar bisa action, walau memang ada download linknya, terkadang download link error
Unknown21 December 2021 at 10:44
Good sir,i have got idea form this blog,many many thanks sir.

FFA-Note