Dokumen Ary

Belajar adalah suatu investasi yang tak ternilai harganya

Memasang Jquery DataTables Di CMS Lokomedia

16-03-2013 14-00-16Seperti yang kita tahu, DataTables digunakan untuk menampilkan data dalam bentuk tabel yang  sudah dilengkapi dengan sorting, paginasi, pencarian, dll sehingga itu sangat membantu dalam mempercepat pengerjaan project kita.

Pada kesempatan ini, saya akan menerangkan cara memasang Jquery DataTables pada CMS Lokomedia, tutorial ini berdasarkan request dari sahabat Dokumen Ary…

Ok langkah pertama untuk mempraktikan tutorial ini, sebelumnya download dulu contoh jquery DataTable pada tutorial sebelumnya.

Langkah kedua, copy dan paste kan folder css dan js yang ada pada file hasil download ke folder adminweb, jika folder css dan js sudah ada pada folder adminweb anda jangan di replace, tinggal masukkan isi dari folder css dan js ke folder css dan js adminweb anda.

Langkah ketiga, buka file media.php, kemudian replace code setelah tag </title> dan sebelum </head> menjadi seperti berikut :

<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";
</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" charset="utf-8">
$(document).ready(function() {
oTable = $('#datatables').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
} );
</script>

Langkah terahir, buka file users.php yang ada di adminweb/modul/mod_users/ kemudian tambahkan class bernama display dan tambahkan id berisi datatables pada tag <table> baris ke 25, seperti berikut :

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

Sekarang saatnya test drive, silahkan masuk admin kemudian masuk ke menu manajemen user maka anda akan melihat tampilan list data yang berbeda… Jika belum berjalan silahkan cermati lagi langkah demi langkahnya… Semoga berhasil bro…

Sekian tutorial kali ini, semoga bisa membantu pekerjaan anda… 🙂

12 responses to “Memasang Jquery DataTables Di CMS Lokomedia

  1. Yeyep Sudrajat March 16, 2013 at 10:54 am

    Mas Ary…SUPER MANTAP!!!..tengkyu banget atas publish tutorial yang tadi siang saya request..Saya coba ya Mas Ary….sangat2 membantu pastinya…Sekali lagi matur tengkyu..

    • Almazari March 16, 2013 at 12:39 pm

      ok.. semoga berhasil…

  2. yeyep sudrajat March 26, 2013 at 4:58 am

    Mas Ary…kalo mau modif untuk fungsi extra/tambahan seperti menambah button Copy, CSV, Excel, PDF, Print yang dimiliki oleh TableTools ke datatable yang Mas Ary bikin gimana caranya?mohon petunjuknya Mas Ary..terima kasih banyak

    • Almazari April 7, 2013 at 3:22 am

      Artikelnya sudah saya posting mas yeyep… 🙂 silahkan di coba…

  3. Hery April 7, 2013 at 8:11 pm

    Mas, saya koe gagal yah ,,, hsil’x ga sprti gmbar d’atas, malah struktur tabel tetep sprti semula dan posisi’x turun jauh banget ke bawah. udah coba berkali” pdhal, mohon bimbingannya lagi donk ~_~

    • Almazari April 8, 2013 at 5:41 am

      Mas Hery download aja file contoh ini mas, setelah itu bisa di terapkan… kalo download dari datatables.net harus di pilih-pilih dulu file mana aja yang di pakai.. insyallah bisa.. 🙂

      • Hery April 12, 2013 at 7:07 pm

        siap mas saya coba dulu 🙂

  4. Iyu June 6, 2013 at 5:17 pm

    mas kalau pengen ngilangin pagingnya gimana? biar gak bentrok sama paging bawaan aslinya

  5. hamdan mey March 22, 2014 at 5:25 am

    mas punten?? maksud kata kata di bawah ini apa ya…
    saya bingung mksudnya.. klo saya download yg di bawah itu terus di apain lagi, mohon pencerahan’y ya maz…

    This script accesses the following external files which you need to upload to your server. Download them below (right click, and select “Save As”):

    jquery-slider.js (main .js file)
    smooth_slider.css (main .css file)
    playlist.json
    images.zip (zip file containing the sample images used. Unzip to where your slideshow page is).

  6. akhgurame April 27, 2014 at 7:15 am

    mas sya mo memasukkan ke halaman depan dari cms swarakalibata ko ga bisa muncul ya datatablesnya, tpi data dari database muncul..please

  7. Syah Rial November 4, 2014 at 5:21 pm

    Maunya nomor jangan ikut dishorting, gimana ? nomor di disable.

  8. // August 12, 2015 at 5:12 pm

    gmana kalo menggunakan select * from tabel where column1 like ‘variabel’
    hal ini agar datatables yang keluar datanya tidak semua terlebih dahulu …
    bagaimana cara penerapannya ???

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: