Cara Menampilkan Icon Feather Icon Di Yajra DataTables

Halo, ketemu lagi diartikel saya, kali ini saya akan membuat sebuah artikel tentang bagaimana cara menampilkan icon feather icon didatabale. Mungkin artikel ini sudah ada ditempat lain, tapi saya coba nyari-nyari belum ada si, langsung saja ke penjelasan kasusnya. Feather icon adalah icon yang berformat svg, feather icon ini kalo menurut saya sangat cepat sekali ya karena icon yang dirender sudah berbentuk svg. Namun ketika saya mencoba implementasi feather-icon pada laravel mix menemukan kendala khususnya di yajra. Kendala yang saya temukan adalah tidak munculnya icon pada table datatable. Padahal code yang saya tulis sudah betul, adapun codingan nya seperti ini contohnya.

Feather icon yang saya tulis diatas menunjukan bawa saya akan menampilkan icon hapus pada datatable namun setelah saya coba implementasikan gak muncul. Lalu saya berpikir sejenak, dan saya lihat secara logika, karena DataTable berfungsi ajax serverside, maka saya kepikiran apakah mungkin karena belum terender. Dan setelah saya cari - cari maka ketemulah solusi DataTable drawablaCallBack yang dimana fungsi tersebut berjalan untuk memanggil ulang fungsi kektika process datatable selesai.

Sehingga kodingan saya menjadi seperti ini pada contohnya.

            $('#customer').DataTable({
                processing: true,
                serverSide: true,
                ajax: '{{ route('customer.index')}}',
                responsive: true,
                columns: [
                    { data: 'id', name: 'id' },
                    { data: 'name', name: 'name' },
                    { data: 'address', name: 'address' },
                    { data: 'phone', name: 'phone' },
                    { data: 'action', name: 'action', searchable: false, orderable: false },
                ],
                order: [[ 0, 'desc' ]],
                drawCallback: function( settings ) {
                    feather.replace()
                }
            });

Setelah saya implementasikan maka berikut outputnya.

Screen Shot 2020-10-22 at 02.14.35

Demikianlah artikel yang sangat pendek ini, semoga bermanfaat bagi yang lagi belajar coding.

Related Articles

Comments