DATATABLES

<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>
                                <?php /*@php
                                    $n = 1;
                                    $checked = 'checked="checked"';
                                    $disabled = 'disabled="disabled"';
                                @endphp
                                    @foreach($sj as $ksj => $vsj)
                                    <tr class="item-{{ $vsj->id }}" style="{{ $vsj->status == 0 ? "background:#ff000025;" : "" }}">
                                        <td data-id="{{ $vsj->id }}">{{ $n++ }}</td>
                                        <td>
                                            @if($vsj->status == 0)
                                                {{ str_replace('_','',$vsj->no_surat_jalan) }}
                                            @else
                                                <a href="{{ url('nlg/suratjalan/edit/'.$vsj->id) }}">{{ str_replace('_','',$vsj->no_surat_jalan) }}</a>
                                            @endif
                                        </td>
                                        <td>
                                            @foreach($g as $kg => $vg)
                                                @if($vg->id == $vsj->gudang_id)
                                                    {{ $vg->name }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td>{{ $vsj->ket_admin_pembuat }}</td>
                                        <td>
                                            @foreach($a as $ka => $va)
                                                @if($vsj->alasan_id == $va->id)
                                                    {{ $va->title }}
                                                @endif
                                            @endforeach
                                        </td>
                                        <td style="text-align: center;">
                                            <input type="checkbox" id="md_checkbox_{{ $vsj->id }}" class="filled-in chk-col-light-green" onclick="return false;"
                                            {{ $vsj->status_admin_penerima == 0 ? '' : 'checked' }}
                                            {{ $vsj->gudang_id == Auth::user()->gudang_id ? "" : "disabled" }} >
                                            <label for="md_checkbox_{{ $vsj->id }}"></label>
                                        </td>
                                        <td>{{ $vsj->ket_admin_penerima == NULL ? '-' : $vsj->ket_admin_penerima }}</td>
                                        <td>{{ $vsj->created_at }}</td>
                                        <td>{{ $vsj->tanggal_checklist }}</td>
                                        <td style="text-align: center;">
                                            @if(Auth::user()->role_id == 1)
                                            <a href="{{ url('nlg/suratjalan/edit/'.$vsj->id) }}" class="btn bg-blue waves-effect"><i class="material-icons">edit</i></a> -
                                            <a href="{{ url('nlg/suratjalan/delete/'.$vsj->id) }}" class="btn bg-red waves-effect" onclick="return confirm('Are you sure want to remove {{ $vsj->no_surat_jalan }} ?');"><i class="material-icons">delete</i></a>
                                            @else
                                                @if($vsj->status == 0)
                                                    <a href="#" class="btn bg-blue waves-effect" disabled><i class="material-icons">edit</i></a>
                                                @else
                                                    <a href="{{ url('nlg/suratjalan/edit/'.$vsj->id) }}" class="btn bg-blue waves-effect"><i class="material-icons">edit</i></a>
                                                @endif
                                            @endif
                                        </td>
                                   </tr>
                                   @endforeach  */ ?>
                            </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>