The Small Notes

Membuat datatable server side pada Codeigniter 4.

Download file pendukung CodeIgniter4-DataTables-0.2.0.zip dan PHP-SQL-Parser-4.5.0.zip lalu letakkan pada app/ThirdParty
Tambahkan script dibawah ini pada app/Config/Autoload.php

public $psr4 = [
        APP_NAMESPACE => APPPATH, // For custom app namespace
        'Config'      => APPPATH . 'Config',
        'PHPSQLParser'          => APPPATH .'ThirdParty/php-sql-parser/src/PHPSQLParser', //Tambahan Script
        'Hermawan\DataTables'   => APPPATH .'ThirdParty/CodeIgniter4-DataTables/src' //Tambahan Script
    ];

Controller

use \Hermawan\DataTables\DataTable;

function ajaxDataTables()
    {
        $db = db_connect();
        $builder = $db->table('acc_transaction_detail')
                    ->select('acc_transaction.TransactionNo, acc_transaction.TransactionDate, acc_transaction_detail.Description, acc_transaction_detail.Price, acc_transaction.CategoryID, acc_transaction_detail.ReceivedBy')
                    ->join("acc_transaction", "acc_transaction.TransactionNo = acc_transaction_detail.TransactionNo");
        
        return DataTable::of($builder)
               ->addNumbering('no')
               ->add('action', function($row){return '<a href="'.base_url("finance/asdasd").'/'.$row->TransactionNo.'"><button type="button">View</button></a>';})
               ->toJson(true);
               
    }

View

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Example Serverside DataTable Using CodeIgniter4-DataTable Library</title>
 
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <!-- DataTables CSS CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css">
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/dataTables.bootstrap4.min.css">
</head> 
<table id="table" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>No</th>
                <th>Transaction No</th>
                <th>Transaction Date</th>
                <th>Keterangan</th>
                <th>Harga</th>
                <th>Debit/Kredit</th>
                <th>Diterima Oleh</th>
                <th>action</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
<footer>
<!-- jQuery CDN -->
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <!-- Bootstrap 4.5 CDN  -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
    <!-- DataTable CDN js -->
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js" ></script>
    <script src="https://cdn.datatables.net/1.10.24/js/dataTables.bootstrap4.min.js" ></script>
    <script type="text/javascript"> 
    $(document).ready(function() {
        $('#table').DataTable({ 
            processing: true,
            serverSide: true,
            ajax: "<?php echo site_url('finance/ajaxDataTables')?>",
            order: [],
            columns: [
                {data: 'no', orderable: false},
                {data: 'TransactionNo'},
                {data: 'TransactionDate'},
                {data: 'Description'},
                {data: 'Price'},
                {data: 'CategoryID'},
                {data: 'ReceivedBy'},
                {data: 'action', orderable: false},
            ]
        });
    });
    </script>
</footer>