Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

Menambah button Copy, CSV, Excel, PDF, Print Datatables

05-04-2013 22-13-18Pertama – tama saya ingin mengucapkan banyak terima kasih kepada rekan-rekan pembaca dokumenary, karna telah memberikan tanggapan dan request atas apa yang telah saya tulis dan yang akan saya tulis… 🙂

Posting kali ini akan membahas bagaimana caranya menambahkan tombol seperti terlihat pada gambar diatas pada jquery datatables. Untuk contoh hasilnya bisa dilihat di INI, contoh tersebut saya terapkan pada modul user CMS Lokomedia versi 1.6.1 seperti pada tutorial sebelum ini.

Rekan-rekan bisa melihat tutorial aslinya  di http://www.datatables.net/extras/tabletools/

Berikut langkah-langkah memasangnya :

1. Download dulu file-file jquery datatables di SINI, file-file tersebut sudah saya pilih sesuai yang kita butuhkan saja.

2. Pindahkan folder css, js dan swf yang telah diunduh kedalam folder adminweb anda.

3. Copy code dibawah ini dan pastekan di bawah tag </title> pada file media.php

<script src="../tinymcpuk/jscripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="../tinymcpuk/jscripts/tiny_mce/tiny_lokomedia.js" type="text/javascript"></script> 
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css" title="currentStyle"> 
@import "css/demo_table_jui.css";
@import "css/jquery-ui-1.8.4.custom.css";
@import "css/TableTools.css";
</style>
<script type="text/javascript" language="javascript" src="js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="js/ZeroClipboard.js"></script>
<script type="text/javascript" language="javascript" src="js/TableTools.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#datatables').dataTable({ 
"sPaginationType": "full_numbers",
"sDom": 'T<"clear">lfrtip',
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf"
}
});
} );
</script>
<style>
.dataTables_length, .dataTables_filter, .dataTables_info, .dataTables_paginate{
font-size:12px;
margin-top:10px;
}
</style>

4. Terahir buka file users.php yang ada di adminweb/modul/mod_users/users.php, kemudian ubah tag <table> pada case default: menjadi seperti berikut

<table class='list display' id='datatables'>

Selesai deeh, silahkan di tes drive… mudah bukan??

Jika tutorial ini membantu pekerjaan anda, jangan lupa like FB page dokumenary disamping ya… 😀 yang sudah like terima kasih buanyaak, saya doakan semoga urusan anda dimudahkan oleh allah S.W.T dan anda menjadi orang yang beruntung di dunia dan ahirat…

Sekian dan Terima kasih sudah berkunjung…

11 responses to “Menambah button Copy, CSV, Excel, PDF, Print Datatables

  1. peyboba April 7, 2013 at 12:12 pm

    Oke Mas Ary…matur tengkyu atas tutorialnya..kemarin2 sambil menunggu petunjuk “pasti” dari Mas Ary saya coba memasang button copy,csv,excel,pdf,print mengikuti tutorial Mas Ary yang sebelumnya tapi pake versi aslinya…ternyata berhasil…tapi lambat ya saat nampil data (mungkin krna baca datanya yang banyak kalee???) ..sekarang coba mau nerapin tutorial dari Mas Ary..skali lagi matur tengkyu banget Mas Ary…smoga sehat dan jaya selalu Mas Ary.

    • Almazari April 8, 2013 at 5:35 am

      Mungkin iya mas, soalnya datatables itu menampilkan data semuanya dulu baru di pagging, berbeda dengan query SQL, menampilkan data sejumlah limit dan batasnya saja…

  2. yeyep sudrajat April 8, 2013 at 2:42 pm

    Terima kasih atas semua pencerahannya Mas Ary…

  3. Suparno May 15, 2013 at 6:41 am

    Mas Ari, bagaimana menerapkan button Copy, CSV, Excel, PDF, Print Datatables ini ke “lokomedia Super WOW”. Terima kasih atas jawabannya.

    • Almazari May 15, 2013 at 9:52 am

      sama saja mas dengan yang saya contohkan diatas…

      • Suparno May 16, 2013 at 1:41 am

        Maksud saya agar bisa masih menggunakan template admin “Lokomedia Super WOW” dan bisa menambahkan button csv, pdf datatable tsb gmana cara settingnya mas? mungkin bisa di publish di blog ini. Terima kasih.

  4. Sutejo October 11, 2014 at 10:22 pm

    Mas ari images XLS, PDF dsb gak ada ya?
    Saya coba terapkan di lokomedia super WOW juga… belum bisa.
    Terima kasih.

  5. Lorraine January 15, 2015 at 3:40 am

    Hello admin do you need unlimited articles for your page ?
    What if you could copy post from other blogs, make it pass copyscape test and publish on your website – i
    know the right tool for you, just search in google:
    luiqight’s article tool

  6. Laurel September 13, 2016 at 4:18 am

    If you are interested in topic: earn money online part time free – you should read
    about Bucksflooder first

  7. Asrianor S January 16, 2017 at 2:47 am

    Saya berhasil nambahkan button untuk export, exportnya juga berhasil. Tapi kenapa dropdown menu saya jadi gak mau ya?

  8. adies August 13, 2019 at 9:19 am

    Link download bahan2 udah rusak gan. Mohon di update

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: