Post Detail

PHP Framework

Cara Order By Yajra DataTables Di Laravel

by Admin
09 July 2019
3057 views

yajrabox-square

Dalam artikel kali ini saya akan mencoba membuat sebuah artikel tentang bagaimana cara order By ID "DESC", karena secara default yajra datatable itu ordernya ASC column 0 maka apabila kita ingin merubah order By DESC kita harus merubah fungsi Datatables nya yang dijavascript.

{!! $html->scripts() !!}

Bagi pengguna Yajra dan menggunakan HTML Builder codingan diatas adalah hal lumrah, dimana codingan tersebut untuk menjalankan DataTables dijavascript. Supaya kita memodifikasi script tersebut, kita bisa lalukan view source code dihalaman yang mau kita rubah order defaultnya. Kalo di browser Google Chrome untuk View Source Code bisa menekan CTRL + U atau bisa diklick kanan lalu View page source.

Viewpagesource

Setelah dilakukan view page source lalu cari dibagian codingan paling bawah biasanya, ada contoh codingan seperti berikut ini.

<script type="text/javascript">(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["dataTableBuilder"]=$("#dataTableBuilder").DataTable({"serverSide":true,"processing":true,"ajax":"","columns":[{"name":"title","data":"title","title":"Title","orderable":true,"searchable":true},{"name":"active","data":"active","title":"Active","orderable":true,"searchable":true},{"name":"action","data":"action","title":"Action","orderable":false,"searchable":false}]});})(window,jQuery);
</script>

Jadi codingan yang pertama diatas mengerate DataTables seperti script diatas jadi kalo disimpulkan seperti ini

{!! $html->scripts() !!}

Menghasilkan script seperti ini

<script type="text/javascript">(function(window,$){window.LaravelDataTables=window.LaravelDataTables||{};window.LaravelDataTables["dataTableBuilder"]=$("#dataTableBuilder").DataTable({"serverSide":true,"processing":true,"ajax":"","columns":[{"name":"title","data":"title","title":"Title","orderable":true,"searchable":true},{"name":"active","data":"active","title":"Active","orderable":true,"searchable":true},{"name":"action","data":"action","title":"Action","orderable":false,"searchable":false}]});})(window,jQuery);
</script>

Lalu kita rapihkan format yang di generate diatas menjadi

<script type="text/javascript">
(function(window,$){
    window.LaravelDataTables=window.LaravelDataTables||{};
        window.LaravelDataTables["dataTableBuilder"]=$("#dataTableBuilder").DataTable({
            "serverSide":true,
            "processing":true,
            "ajax":"",
            "columns":[
                {"name":"title","data":"title","title":"Title","orderable":true,"searchable":true},
                {"name":"active","data":"active","title":"Active","orderable":true,"searchable":true},
                {"name":"action","data":"action","title":"Action","orderable":false,"searchable":false}]
            });
        })
    (window,jQuery);
</script>

Kelihatan Lebih rapih, lalu hapus codingan yang awal dan replace dengan codingan yang telah dirapihkan.

{!! $html->scripts() !!}

Ganti Dengan Codingan

<script type="text/javascript">
(function(window,$){
    window.LaravelDataTables=window.LaravelDataTables||{};
        window.LaravelDataTables["dataTableBuilder"]=$("#dataTableBuilder").DataTable({
            "serverSide":true,
            "processing":true,
            "ajax":"",
            "columns":[
                {"name":"title","data":"title","title":"Title","orderable":true,"searchable":true},
                {"name":"active","data":"active","title":"Active","orderable":true,"searchable":true},
                {"name":"action","data":"action","title":"Action","orderable":false,"searchable":false}]
            });
        })
    (window,jQuery);
</script>

Setelah diganti baru kita bisa menyisipkan fungsi datatable Order Column tinggal ditambahkan fungsi seperti ini

"order": [[ 0, "desc" ]]

Sehingga Full Codingannya seperti ini.

<script type="text/javascript">
(function(window,$){
    window.LaravelDataTables=window.LaravelDataTables||{};
        window.LaravelDataTables["dataTableBuilder"]=$("#dataTableBuilder").DataTable({
            "serverSide":true,
            "processing":true,
            "ajax":"",
            "columns":[
                {"name":"title","data":"title","title":"Title","orderable":true,"searchable":true},
                {"name":"active","data":"active","title":"Active","orderable":true,"searchable":true},
                {"name":"action","data":"action","title":"Action","orderable":false,"searchable":false}
            ],
            "order": [[ 0, "desc" ]]
        });
    })
    (window,jQuery);
</script>

Maka Secara Otomatis Column 0 akan Order By DESC, demikianlah cara order By Desc pada Yajra DataTables. Semoga artikelnya bermanfaat dan jangan lupa kalo ada pertanyaan silahkan jangan sungkan Contact.

Thank's