Kode datatable yang berguna

Bismillaahirrohmaanirrohiim…

Barangkali ada yang suka menggunakan datatable untuk menampilkan table dengan bootstrap, javascript / jquery.

Berikut ini saya tulis beberapa kode / fungsi yang sering dipakai saat menggunakan datatable.

CSS dan JS yang diperlukan:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <link rel="stylesheet" href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdn.datatables.net/buttons/2.2.3/css/buttons.bootstrap.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />

Plugin lainnya:

    <script src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
    <script src="https://cdn.datatables.net/1.12.1/js/dataTables.bootstrap.min.js"></script>

    <script src="https://cdn.datatables.net/buttons/2.2.3/js/dataTables.buttons.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.bootstrap.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.html5.min.js"></script>
    <script src="https://cdn.datatables.net/buttons/2.2.3/js/buttons.print.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>

Kode untuk mengaktifkan table yang akan diformat sebagai datatable:

$(".tabledata").DataTable({
    paging: false,
    info: false,
    searching: false,
    order: [],
    dom: "Bfrtip",
    buttons: [
        {
            extend: "excel",
            exportOptions: {
                columns: [":not(.notexport)"],//kecuali th dengan class notexport
                title: 'Data export',//nama file
                messageTop: 'Teks di atas',
                messageBottom: 'Teks di bawah',
                format: {
                    body: function(data, column, row) {
                        if (typeof data === 'string' || data instanceof String) {
                            data = data.replace(/<(?!br\s*\/?)[^>]+>/g, '');//menghapus tags html kecuali br
                            data = data.replace(/<br\s*\/?>/ig, "\r\n");//mengganti br dengan \r\n
                        }
                        return data;
                    }
                }
            }
        },
        {
            extend: "pdf",
            exportOptions: {
                columns: ":not(.notexport)"
            }
        },
        {
            extend: "print",
            exportOptions: {
                columns: [":not(.notexport)"]
            }
        },
    ],
});

Inisiasi datatable dari konten yang diambil dengan ajax:

    $.ajax({
        type: "POST",
        data: "act=edit&did="+did+"&ke="+ke,
        url: "url",
        success:function(data) {
            $("#id_list_data").html(data);        

            var dttbl = $("#datatable").DataTable({
                "paging": false,
                "ordering": false,
                "oSearch": { "bSmart": false, "bRegex": true } //searching valid meski dalam kurung
            });
        },
        beforeSend: function(e) {
            $("#id_list_data").html("Please wait...");
        },
        complete: function(e) {

        }, error: function(e, s, a) {
            $("#id_list_data").html(\'Gagal saat load data, <a href="javascript:;" onclick="location.reload()">klik di sini untuk mengulang kembali.\');
        }
    })

Disable auto sorting pada kolom 1

"order": [] 

Sort by nilai td

<td data-sort="37">2/1/78 (37 years old)</td>

Export kolom tertentu meskipun di hidden

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                exportOptions: {
                    columns: [ 0, ':visible' ]
                }
            },
            {
                extend: 'pdf',
                exportOptions: {
                    columns: ':visible'
                }
            },
            {
                extend: 'print',
                exportOptions: {
                    columns: [ 0, 1, 2, 5 ]
                }
            },
            'colvis'
        ]
    } );
} );

Bagikan
Baca Juga:   HTML dan Javascript ternyata hubungannya mudah dipahami (part 5)

You May Also Like

About the Author: rasupe

Leave a Reply

Your email address will not be published. Required fields are marked *