DATATABLE

<table id="suratjalan" class="table table-bordered table-striped table-hover dataTable js-exportable display" width="100%" cellspacing="0">
                            <thead>
                                <tr>
                                    <!-- <th style="text-align: center;">No</th> -->
                                    <th style="text-align: center;">No. Surat Jalan</th>
                                    <th style="text-align: center;">Gudang</th>
                                    <th style="text-align: center;">Keterangan<br><small>Admin Pembuat</small></th>
                                    <th style="text-align: center;">Alasan<br><small>Admin Pembuat</small></th>
                                    <th style="text-align: center;">Checklist<br><small>Admin Penerima</small></th>
                                    <th style="text-align: center;">Keterangan<br><small>Admin Penerima</small></th>
                                    <th style="text-align: center;">Tanggal<br><small>Dibuat</small></th>
                                    <th style="text-align: center;">Tanggal<br><small>Checklist</small></th>
                                    <th style="text-align: center;">Tanggal<br><small>User</small></th>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>

<script>
var editor;

     $(document).ready(function(){
        $('#suratjalan').on('click','tbody td:not(:first-child)', function (e){
            editor.inline(this);
        });

        $('#suratjalan').DataTable({
            dom: "Bfrtip",
            processing : false,
            pageLength : 15,
            serverSide : true,
            orderMulti : false,
            "ajax": {
                "url": "home",
                "type": "GET",
                "dataSrc": "tableData"
                // function (json) {

                //     for (var i = 0, jml = json.data.length; i<jml; i++) {
                //         json.data[i][0] = '<a href="/message/'+json.data[i][0]+'>View message</a>';
                //     }
                //     return json.data;
                // }
            },
            order: [
                [ 1, 'asc' ]
            ],
            columns: [
                { data: "no_surat_jalan" },
                { data: "gudang_id" },
                { data: "ket_admin_pembuat", orderable: false },
                { data: "alasan_id", orderable: false },
                { data: "status_admin_penerima" },
                { data: "ket_admin_penerima", orderable: false },
                { data: "created_at"  },
                { data: "tanggal_checklist" },
                { data: "tanggal_user" },
            ],
            select: {
                style: 'os',
                selector: 'td:first-child'
            },
            buttons: [
                { extends: "create", editor: editor },
                { extends: "edit", editor: editor },
                { extends: "remove", editor: editor }
            ]
        });

    });
</script>