Cara Membuat DataTable Menggunakan JSon di CodeIgniter

DataTable

Bagaimana cara menggunakan dataTable dengan data JSon di CodeIgniter? Di bawah contoh penggunaan secara singkatnya.

Controllers 
function get_data() {
        $list = $this->daftar_m->daftar();
        $data = array();
        $i = 1;
        $no = 1;
        foreach ($list as $row) { //ini kalau datanya dari database
            $row = array();
            $row[] = $no;
            $row[] = $row->nama;
            $row[] = $row->skpd;            $row[] = $row->deviasi. "%";
            $data[] = $row;
            $no++;
        }
        $output = array(
            //"recordsTotal" => 10,
            "data" => $data,
        );
        echo json_encode($output);
}


Models
//query kamu di model daftar_m


View
<table class="table table-bordered table-striped" id="table">
    <thead>
        <tr>
            <th style="vertical-align: middle" class="text-center" width="5%">NO.</th>
            <th style="vertical-align: middle" class="text-center" width="40%">NAMA</th>
            <th style="vertical-align: middle" class="text-center" width="45%">SKPD</th>
            <th style="vertical-align: middle; background: transparent !important;" class="text-center" width="10%;">DEVIASI</th>
        </tr>
    </thead>
</table>


JavaScript

var oTable = $('#table').DataTable({
            "ajax": {
               "url": "<?php echo site_url('controller/get_data') ?>",
               "type": "POST"
            },
            "processing": true,
            columnDefs: [
                {
                    targets: 3,//kolom ke 4 index pertama 0
                    render: function (data, type, row) {//merubah tipe output text
                        return '<input type="text" name="dev[]" class="form-control" value="' + data + '">';
                    }
                }
            ],
            "aoColumns": [//sortable dan styling di setiap kolom
                {
                    "bSortable": true,
                    "className": "text-center"
                },
                {
                    "bSortable": true
                },
                {
                    "bSortable": false
                },
                {
                    "bSortable": false,
                    "className": "text-center excellent",
                }
            ],
            "paging": false,//show hide dropdown pages
            "ordering": true,
            "bFilter": true,//enable disable fitur pencarian
            "iDisplayLength": 10,
            "language": {
                "zeroRecords": "Maaf data tidak ditemukan!",
                "sSearch": "Cari",
                "searchPlaceholder": "Keyword" //placeholder
            },
            columns: [//deklarasi thead
                {title: "No."},
                {title: "Nama"},
                {title: "SKPD"},
                {title: "Deviasi"}
            ]

        });

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.

JavaScript Auto Increment "append()"

Append JavaScript

Cara menambah tag html ada banyak cara, misal dengan session atau dengan push array. Tapi di bawah ini adalah contoh menambah tag html menggunakan append javascript. Berikut scriptnya:

HTML

<div id="inputtext"></div>

<button>Add Input</button>

JavaScript

$(document).ready(function(){

    var count = 1;

    $("button").click(function(){

       $("#inputtext").append((count++) +"<br>");

    });

});

Sekian, terimakasih atas kunjungannya.

Salam,

PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.