Membuat Tabel Menggunakan sAjaxSource di DataTables

DataTable

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

Controllers
  public function get_data() {
        $list = $this->daftar_m->getData();
        $recordsTotal = count($list);
        foreach($list as $key){
            $arr = array();
            $arr[] = $key->namakolom;
            $datanya[] = $arr;
        }
        $output = array(
            "recordsTotal" => $recordsTotal,
            "data" => $datanya,
        );
        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%">Nama</th>
        </tr>
    </thead>
</table>


JavaScript

$(document).ready(function () {
        var sourcenya = "<?php echo site_url('spp_tu/get_pilih_paket_kegiatan/' . enkripsi($kgo_key) . '/' . enkripsi($uk_paket)) ?>";
        var oTable = $('#table').DataTable({
            "bSort": false,
            "sAjaxSource": sourcenya,
            "processing": true,
//            columns: [//deklarasi thead
//                {data: "namakolom"}
//            ]
        });

Sekian, terimakasih atas kunjungannya.

Salam,

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

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.

Membuat Daftar Data Menggunakan Data Table

Berikut cara membuat listing menggunakan dataTables:

//css : jquery.dataTables.min.css

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.css"/>

//js : jquery.dataTables.min.js

<script type="text/javascript" src="https://cdn.datatables.net/s/dt/dt-1.10.10/datatables.min.js"></script>

<form method="POST" action="<?php echo base_url('skpd/struktur_organisasi/proses_input_keg/' . $id_personil); ?>" enctype='multipart/form-data' class="formtambahpaket">
    <input type="hidden" name="id_personil" value="<?php echo $id_personil; ?>">

<table class="tabel table-bordered" width="100%" id="table">
    <thead>
        <tr>
             <th class="txt-c" width="70%">Kegiatan</th>
             <th class="txt-c" width="25%">Nama Staff</th>
             <th class="txt-c" width="5%" style="position: relative;"><input type="checkbox" id="flowcheckall" value="" title="Pilih Semua" /> <span style="">Pilih Semua</span></th>
        </tr>
    </thead>
    <?php foreach ($get_kegiatan as $row) { ?>
        <tr>
            <td>Text</td>
            <td>Text</td>
            <td align="center">
                <input class="cek" type="checkbox" name="keg[]" value="<?php echo $row->keg_key;?>"><label for=""></label>
            </td>
        </tr>
     <?php } ?>
</table>
                    
<div class="form-group" style="padding-top: 20px; margin-bottom: -20px; text-align: center;">
                        
<div class="col-md-12  pull-right">
    <button class="btn btn-success" id="add" type="submit">Simpan</button>
    <button class="btn btn-danger" type="button" onclick="$.fancybox.close()">Batal</button>
</div>

</form>

<script type="text/javascript">
    $(document).ready(function () {
        var oTable = $('#table').DataTable({
            "paging": true,
            "ordering": false,
            "info": false,
            "bFilter": true,
            "bLengthChange": false,
            "iDisplayLength": 10, "responsive": true,
            "language": {
                "sSearch": "Cari",
                "zeroRecords": "Maaf data tidak ditemukan!",
                "infoEmpty": "Data yang dicari tidak ditemukan!"
            }
        });

        $('#flowcheckall').click(function (e) {
            var chk = $(this).prop('checked');
            $('input', oTable.$('tr', {"filter": "applied"})).prop('checked', chk);
        });

        $('input[name=cariiii]').on("keyup", function (e) {
            value = $(this).val();
            if (value.length > 3) { //
                oTable.columns(0).search(this.value).draw();
            } else if (value.length === 0) {
                oTable.columns(0).search(this.value).draw();
            }
            console.log(value);
        });

        $("form").submit(function (event) {
            var data = oTable.$(".cek:checked", {"page": "all"});
            var uniq_kode = [];
            data.each(function (index, elem) {
                uniq_kode [index] = $(elem).val();
            });
            //            alert(uniq_kode);
            //            return false;
            $("#add").text("menyimpan..");
            event.preventDefault();
            $.ajax({
                url: "<?php echo base_url($urlnya . '/proses_input_keg/' . $id_personil); ?>",
                type: 'POST',
                data: {keg: uniq_kode}, //$(this).serialize()
                success: function () {
                    setTimeout(function () {
                        //alert("Data berhasil ditambahkan!");
                        $.fancybox.close();
                        setTimeout(function () {
                            window.location.reload();
                        }, 500);
                    }, 500);
                }
            });
        });
    });
</script>

Sekian, terimakasih atas kunjungannya.

Salam,

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