iklan1

Jquery DataTables Export Excel Dan Short Column

Jquery DataTables Add Tombol Export Excel
Jquery DataTables Add Tombol Export Excel 

Pada postingan kali ini Admin akan memberikan contoh penggunaan Jquery DataTables Export Excel Dan Short Column


Tak jarang kita menyajikan data berupa tabel, nah bagaimana agar data tersebut dapat di Export ke Excel dan dapat di short menurut kebutuhan pengguna? Solusinya dengan menggunakan Jquery DataTables Add Tombol Export Excel.


Pemasangan Jquery DataTables Export Excel Dan Short Column ini sangatlah mudah dan simpel sekali. Namun akan sedikit Admin jelaskan apa dan bagaimana pemasangan Jquery ini agar mendapatkan tampilan yang sempurna.


Pertama kita siapkan Code Style CSS nya, karena kita praktik menggunakan Blogger maka yang paling mudah adalah menggunakan Script CDN, atau code script yang sudah di siapkan oleh Pembuat Jquery DataTables.


<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"/>


Code Style CSS diatas sebaiknya ditempatkan di atas tabel yang akan kita buat.


Tahap selanjutnya adalah menyiapkan Tabel, perlu di perhatikan dalam pembuatan code tabel ini harus sesuai dengan standar code tabel, agar mendapatkan hasil tampilan yang kita inginkan. Jika tabel tidak memenuhi standar code tabel, biasanya Script DataTables tidak akan bekerja dengan maksimal. Di bawah ini contoh Code Tabel Standar.


<table id="example" class="table table-striped">
	<thead>
		<tr>
			<th>No</th>
			<th>Nama</th>
                        <th>Nilai</th>
		</tr>
	</thead>
        <tbody>
           
		<tr>
                        <td>1</td>
                        <td>Azza</td>
                        <td>80</td>
           	</tr>
		<tr>
                        <td>2</td>
                        <td>Bama</td>
                        <td>82</td>
           	</tr>
		<tr>
                        <td>3</td>
                        <td>Jaka</td>
                        <td>81</td>
           	</tr>
		<tr>
                        <td>4</td>
                        <td>Gita</td>
                        <td>90</td>
           	</tr>
		<tr>
                        <td>5</td>
                        <td>Marta</td>
                        <td>76</td>
           	</tr>
           
    	</tbody>
</table>


Code diatas adalah contoh code standar Tabel, yang perlu diperhatikan adalah code <thead></thead> dan code <tbody></tbody>, code ini wajib ada agar Script DataTables dapat bekerja dengan sempurna, tanpa ada error.


Untuk tahap selanjutnya dalam penggunaan Jquery DataTables Export Excel Dan Short Column adalah Code Javascriptnya, Code Javascript ini sebaiknya ada di bawah code Table yang sudah kita buat di atas.


<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>


Code Javascript di atas wajib ada, agar tombol Export to Excel bisa tampil. Untuk code Javascript selanjutnya akan sedikit saya jelaskan fungsi dari beberapa codenya agar kita bisa edit sesuai keinginan kita.


<script type="text/javascript">
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
	dom: 'Blfrtip',
	"language": {
    		"lengthMenu": 'Display <select>'+
      			'<option value="10">10</option>'+
      			'<option value="20">20</option>'+
      			'<option value="30">30</option>'+
      			'<option value="40">40</option>'+
      			'<option value="50">50</option>'+
      			'<option value="-1">All</option>'+
      			'</select> records'
  		},
        "order": [[ 1, "asc" ]],
        buttons: [
            'excelHtml5',
            'copyHtml5'
        ]
    } );
} );
</script>


Sedikit penjelasan tentang code diatas, pada baris  ketiga terdapat code  $('#example') ini menunjukan ID daripada tabel, jadi harus sama dengan ID tabel yang sudah kita buat.


Selanjutnya pada code '<option value="-1">All</option>'+ ini berfungsi untuk menampilkan option pilihan tampilkan data keseluruhan pada DataTables.


Sedangkan fingsi code "order": [[ 1, "asc" ]], adalah untuk mengurutkan data atau short data, angka 1 menunjukan urutan colom pada tabel yang mana urutan kolom dimulai dari sebelah kiri, kolom 0, 1, 2, 3, dst. Sedangkan "asc" menunjukan fungsi short Ascending atau kita bisa merubahnya dengan "desc" maka data akan di short dengan fungsi Descending.


Pada baris code buttons: [ dibawahnya ada code 'excelHtml5', dan 'copyHtml5' Ini fungsinya untuk menampilkan tombol apa saja yang kita inginkan, sebenarnya ada beberapa tombol seperti PDF dan lainnya, namun pada kali ini Admin hanya memilih 2 tombol saja.


Nah, demikian sedikit penjelasan tentang fungsi dari Script DataTables yang Admin pahami, disini Admin sendiri juga masih belajar, jadi masih banyak fungsi lain yang belum Admin jelaskan.


Sebagai contoh dari penerapan Code Jquery DataTables Add Tombol Export Excel, silahkan lihat Tabel dibawah ini. Dan semoga bermanfaat. 


"Happy Coding"



No Nama Nilai
1 Azza 80
2 Bama 82
3 Jaka 81
4 Gita 90
5 Marta 76
LihatTutupKomentar

iklan2