Pindahkan Kolom Lihat/Edit/Hapus dari Sisi Kanan ke Kiri – Panel Admin Cepat

Saat membuat tabel di QuickAdminPanel, kolom terakhir kami adalah kolom dengan link ke Lihat/Edit/Hapus data. Salah satu pelanggan kami bertanya: bagaimana jika Anda ingin kolom itu sebagai yang pertamapada awalnya? Bagian yang sulit adalah bagaimana melakukannya dengan modul AJAX Datatable. Mari kita lihat.

---

Langkah 1. Titik Awal: Kode Datatable AJAX Default

Berikut tabel defaultnya:

Untuk memuatnya, kami memiliki kode di beberapa bagian berbeda.

Pertama, file Blade – sumber daya/tampilan/proyek/index.blade.php:

Tabel itu sendiri – tanpa data, karena nanti dimuat dengan panggilan AJAX.

<table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Project">
    <thead>
        <tr>
            <th width="10">

            </th>
            <th>
                {{ trans('cruds.project.fields.id') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.name') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.description') }}
            </th>
            <th>
                 
            </th>
        </tr>
    </thead>
</table>

Dan kemudian bagian JavaScript untuk memuat Tabel Data:

@section('scripts')
    @parent

    <script>
      $(function () {
        let dtButtons = $.extend(true, [], $.fn.dataTable.defaults.buttons)
        let dtOverrideGlobals = {
            buttons: dtButtons,
            processing: true,
            serverSide: true,
            retrieve: true,
            aaSorting: [],
            ajax: "{{ route('admin.projects.index') }}",
            columns: [
              {data: 'placeholder', name: 'placeholder'},
              {data: 'id', name: 'id'},
              {data: 'name', name: 'name'},
              {data: 'description', name: 'description'},
              {data: 'actions', name: '{{ trans('global.actions') }}'}
            ],
            order: [[1, 'desc']],
            pageLength: 100
          }
        $('.datatable-Project').DataTable(dtOverrideGlobals)

        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
          $($.fn.dataTable.tables(true)).DataTable()
            .columns.adjust()
        })
      })

    </script>
@endsection

Data berasal dari Pengendali indeks() metode, dengan bantuan paket Laravel jQuery Datatables.

Ini dia app/Http/Controllers/Admin/ProjectsController.php:

$query = Project::query()->select(sprintf('%s.*', (new Project)->table));
$table = Datatables::of($query);

$table->addColumn('placeholder', ' ');
$table->addColumn('actions', ' ');

$table->editColumn('actions', function ($row) {
    $viewGate="project_show";
    $editGate="project_edit";
    $deleteGate="project_delete";
    $crudRoutePart="projects";

    return view('partials.datatablesActions', compact(
        'viewGate',
        'editGate',
        'deleteGate',
        'crudRoutePart',
        'row'
    ));
});

$table->editColumn('id', function ($row) {
    return $row->id ? $row->id : "";
});
$table->editColumn('name', function ($row) {
    return $row->name ? $row->name : "";
});
$table->editColumn('description', function ($row) {
    return $row->description ? $row->description : "";
});

$table->rawColumns(['actions', 'placeholder']);

return $table->make(true);

Ini mungkin terlihat agak rumit, tetapi yang terjadi di sini hanyalah mendapatkan kueri dari database dan mengganti beberapa logika untuk beberapa kolom, termasuk tindakan kolom yang kami pedulikan.

Lalu bagaimana cara memindahkannya ke depan?

---

Langkah 2. Mengubah Urutan Kolom Blade

Untuk mengubah urutan kolom, umumnya cukup dengan berpindah

elemen sesuai keinginan, lalu pertahankan urutan yang sama dalam JavaScript kolom susunan.

Jadi, di berubah sumber daya/tampilan/proyek/index.blade.php kita punya ini.

1. Kami memindahkan yang kosong th elemen dari posisi terakhir ke yang kedua. Kolom pertama dicadangkan untuk kotak centang untuk operasi penghapusan massal.

<table class=" table table-bordered table-striped table-hover ajaxTable datatable datatable-Project">
    <thead>
        <tr>
            <th width="10">

            </th>
            <th>
                 
            </th>
            <th>
                {{ trans('cruds.project.fields.id') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.name') }}
            </th>
            <th>
                {{ trans('cruds.project.fields.description') }}
            </th>
        </tr>
    </thead>
</table>

2. Kami mengubah pesanan kolom array dari file yang sama:

ajax: "{{ route('admin.projects.index') }}",
columns: [
  {data: 'placeholder', name: 'placeholder'},
  {data: 'actions', name: '{{ trans('global.actions') }}'},
  {data: 'id', name: 'id'},
  {data: 'name', name: 'name'},
  {data: 'description', name: 'description'}
],

3. Pada file yang sama di bawah ini, kita perlu mengubah pesanan bawaankarena secara default diurutkan berdasarkan Kolom 1 Des:

order: [[1, 'desc']],

Dan sekarang Kolom 1 adalah kolom “tindakan” – kolom dihitung mulai dari 0.

Jadi kita perlu mengubah urutannya menjadi ini:

order: [[2, 'desc']],

Dan inilah hasilnya:

Sesuai keinginan kita, tombolnya ada di sebelah kiri ya?

Belum selesai, ada satu hal lagi yang perlu kita urus.

---

Langkah 3. Jadikan Kolom Baru Ini Tidak Dapat Dicari

Datatable akan berfungsi sekarang, tetapi jika kita mencoba mencari di kanan atas, hasilnya akan gagal:

Alasannya adalah ia mencoba mencari di kolom “tindakan”, dan tidak dapat menemukannya di database. Dan itu benar, itu adalah kolom khusus kami yang tidak sesuai dengan kolom database mana pun.

Ada file lain yang harus Anda ketahui, yang berisi pengaturan utama Datatables.
Dia sumber daya/tampilan/tata letak/admin.blade.phpdan itu berisi JavaScript ini:

  $.extend(true, $.fn.dataTable.defaults, {
    language: {
      url: languages['{{ app()->getLocale() }}']
    },
    columnDefs: [{
        orderable: false,
        className: 'select-checkbox',
        targets: 0
    }, {
        orderable: false,
        searchable: false,
        targets: -1
    }],
    select: {
      style:    'multi+shift',
      selector: 'td:first-child'
    },
    order: [],
    scrollX: true,
    pageLength: 100,
    dom: 'lBfrtip<"actions">',
    buttons: [
      {
        extend: 'copy',
        className: 'btn-default',
        text: copyButtonTrans,
        exportOptions: {
          columns: ':visible'
        }
      },
      // ... other buttons
    ]
  });

Yang kami pedulikan di sini adalah kolomDefs parameter – berisi susunan pengaturan kolom yang berlaku untuk semua tabel data.

Dalam kasus kami, secara default kolom nomor 0 (target: 0) adalah untuk kotak centang untuk multi-hapus.

Lalu ada target: -1 yang artinya kolom TERAKHIR yang dikhususkan untuk tombol Lihat/Edit/Hapus, sehingga tidak boleh diurutkan dan tidak dapat dicari.

Jadi apa yang perlu kita ubah di sini adalah mengganti pengaturan default di JavaScript Projects CRUD kita sendiri.

Inilah pembaruan kami sumber daya/tampilan/proyek/index.blade.php:

columns: [
  {data: 'placeholder', name: 'placeholder'},
  {data: 'actions', name: '{{ trans('global.actions') }}', orderable: false, searchable: false },
  {data: 'id', name: 'id'},
  {data: 'name', name: 'name'},
  {data: 'description', name: 'description', orderable: true, searchable: true }
],

Selesai, kita mendapatkan hasil akhirnya – penelusuran berfungsi kembali!

---

Untuk informasi lebih lanjut tentang modul AJAX Datatables, baca artikel ini atau tonton video ini.

Juga, periksa dokumentasi paket Laravel yang mendasarinya: Yajra Datatables.