• Login
  • Join
  • Home
  • Profil
  • Cara Pembelian
  • Kontak

logo

  • Home
  • Kategori Tutorial
    • Ajax - JQuery
    • API Developer
    • CakePHP
    • CodeIgniter
    • HTML & CSS
    • Lain-lain
    • MySQL - MySQLi
    • OOP PHP
    • PHP Classic
    • Smarty PHP
    • SMS Gateway
    • Version Control
  • Download
  • My Books
  • Prosedur Penulisan Naskah
  • Toko Online
  • My Sites
    • Asfamedia.com
    • Asfasolution.com
    • Komiqu.com
Home
  • Home
  • Login
  • Join
  • Kategori Tutorial
    • Ajax - JQuery
    • API Developer
    • CakePHP
    • CodeIgniter
    • HTML & CSS
    • Lain-lain
    • MySQL - MySQLi
    • OOP PHP
    • PHP Classic
    • Smarty PHP
    • SMS Gateway
    • Version Control
  • Download
  • Info Buku
  • Prosedur Penulisan Naskah
  • Toko Online
  • My Sites
    • Asfamedia.com
    • Asfasolution.com
    • Oaseast.com
  • Pembelian online saat ini dialihkan ke www.asfamedia.com
  • Dapatkan diskon hingga 40% dengan bergabung sebagai member di asfamedia.com (Khusus buku-buku penerbit CV. ASFA Solution)
  • Segera daftarkan email Anda di newsletter melalui right column untuk mendapatkan informasi terbaru agussaputra.com
  • Artikel dan informasi yang ditampilkan bisa Anda copy, dengan catatan: menuliskan sumber : agussaputra.com
  • Home
  • Artikel
  • Tampil data WOW! menggunakan DataTable Plugin

Tampil data WOW! menggunakan DataTable Plugin

20 Februari 2013
8   
11.536

Tampil data WOW! menggunakan DataTable Plugin

Ada cara asik yang bisa Anda gunakan dalam menampilkan data. biasanya jika cara manual kita hanya menampilkan tabel biasa.. namun ada kekurangannya.. tabel biasa yang anda buat hanya sebatas menampilkan data saja ditambah penomoran halaman pun terpisah antara data tersebut, jadi bisa dibilang, Anda membuat dobel kode, yaitu:
1. Kode untuk menampilkan data
2. Kode untuk membuat halaman (paging).

Namun disini ada teknik baru yang ingin penulis bagikan kepada Anda, yaitu dataTable.. sebuah fungsi menggunakan jQuery yang akan mengubah tampilan Anda secara responsif.. penerapannya pun sangat mudah.. karena hanya menggunakan tag tabel html biasa, seperti:

<table>
</table>

hanya saja pada tag <table>, kita bisa berikan id selector, yang akan merubah tampilan data Anda secara 360 derajat..

Langsung saja:
1. Download plugin dataTable jQuery di situs: http://www.datatables.net/ (.zip)
2. Jika sudah, lakukan extract file .zip, akan menghasilkan folder (ubah nama folder sesuai dengan keinginan Anda untuk mudah diingat), penulis mengubah menjadi folder dataTables
3. Tuliskan skrip berikut:

<style title="currentStyle" type="text/css"><br />
    @import "DataTables/media/css/demo_page.css";<br />
    @import "DataTables/media/css/demo_table_jui.css";<br />
    @import "DataTables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";<br />
    @import "DataTables/extras/TableTools/media/css/TableTools_JUI.css";<br />
<style><br />
<script type="text/javascript" language="javascript" src="DataTables/media/js/jquery.js"></script><br />
<script class="jsbin" src="http://datatables.net/download/build/jquery.dataTables.nightly.js"></script><br />
<script><br />
$(document).ready( function () {<br />
                $('#example').dataTable( {<br />
                    "bJQueryUI": true,<br />
                    "sPaginationType": "full_numbers"<br />
                } );<br />
            } );<br />
</script>

<table border="0" cellpadding="0" cellspacing="0" class="display" id="example">
    <thead>
    <tr>
        <th>No</th>
        <th>Nama</th>
        <th>Perusahaan</th>
        <th>Jabatan</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Agus Saputra</td>
        <td>CV. ASFA Solution</td>
        <td>Director of Development Division</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Feni Agustin</td>
        <td>CV. ASFA Solution</td>
        <td>VP Operation</td>
    </tr>
    <tr>
        <td>3</td>
        <td>Hadi Setiawan</td>
        <td>CV. ASFA Solution</td>
        <td>Marketing Lead Division</td>
    </tr>
    <tr>
        <td>4</td>
        <td>Ansera</td>
        <td>CV. ASFA Solution</td>
        <td>Web Developer</td>
    </tr>
    <tr>
        <td>5</td>
        <td>Anthonius</td>
        <td>CV. ASFA Solution</td>
        <td>Junior Programmer</td>
    </tr>
    <tr>
        <td>6</td>
        <td>Daniel</td>
        <td>CV. ASFA Solution</td>
        <td>Web Designer</td>
    </tr>
    </tbody>
</table>

 

Jika sudah, ya sudah jadi datatablenya.. mudahkan?.. menggunakan tag table biasa disisipi sedikit kode library jquery.. Semoga postingan kali ini dapat memberikan manfaat sebesar-besanrnya untuk Anda.

recommend to friends
  • twitter

Artikel Terkait

Launching Web Mobile Ver 2.0. - jQuery Mobile

Launching Web Mobile Ver 2.0. - jQuery Mobile

26-06-2012 0
Upload Gambar Menggunakan Ajax (jQuery)

Upload Gambar Menggunakan Ajax (jQuery)

27-09-2011 0
Pencarian 2 Periode (Awal - Akhir) Menggunakan DatePicker jQuery

Pencarian 2 Periode (Awal - Akhir) Menggunakan DatePicker jQuery

02-05-2011 0

Komentar

  1. pengobatan tradisional maag kronis
    06-03-2013, 13:51:34

    isi webnya sangat inovatif,
    http://goo.gl/SD72f

  2. download lagu terbaru 2014
    07-03-2013, 08:48:48

    makasih banyak infonya yah thnks banget ajibbb

  3. obat lemah syahwat
    11-05-2013, 15:59:20

    makasih atas infonya sangat menarik http://goo.gl/W38bt

  4. Idham
    05-06-2013, 00:20:41

    Saya juga pake nih plugin, pake CI sebgi mesinnya.

  5. Fatimah
    13-11-2014, 03:38:06

    Pak Agus,gimana caranya koneksi ke database untuk datatable-nya? di atas kan contohnya html manual ?

  6. Agus Saputra
    13-11-2014, 08:34:10

    Fatimah @ koneksi database sama saja jika menggunakan PHP, bisa menggunakan mysql_connect dan mysql_select_db..

    Pada dasarnya datatable itu sama seperti kode html biasa, yaitu menggunakan tag <table>

  7. sari
    21-11-2014, 12:39:55

    pak gimana kalau menampilkan data table ke dialog box jquery?

  8. Agus Saputra
    23-11-2014, 18:37:06

    sari @ menggunakan fancybox saja.. coba baca lebih lanjut di fancybox.net

Tinggalkan Komentar


Lihat Semua

Buku Terbaruku

Panduan Praktis dan Jitu Menguasai PHP7 dan SQL Server 2017
Panduan Praktis dan Jitu Menguasai PHP7 dan SQL Server 2017

Like Our Page

Agus Saputra
CV. ASFA Solution

Terpopuler Saat Ini

  • Artikel Terpopuler
  • Buku Terpopuler
(75.108)

Mengubah +62 menjadi 0 dan 0 menjadi +62 - SMS

(61.608)

Membuat Laporan PDF PHP Berdasarkan Kondisi

(51.616)

Sebab Gammu Error 1053

(48.404)

Telah Terbit Buku Best Practice Membangun Aplikasi Pelayanan Publik dengan Framework Codeigniter 3

(38.563)

Import Excel to Database Menggunakan PHP dengan Filtering Data Besyarat

(37.024)

Membuat Menu Tree Sendiri

(35.616)

Membuat Statistika Pengunjung Secara Dinamis

(23.487)

Memanfaatkan SMS API secara Online dengan PHP

(21.605)

Upload Gambar Menggunakan Ajax (jQuery)

(19.891)

Mengirim Email Lampiran di PHP (File Attachment)

(22.371)

Framework Codeigniter 3 Membangun Aplikasi Penggajian untuk Panduan Skripsi
by Yenda Purbadian

(21.893)

Proyek Membuat Aplikasi Forum Diskusi Dengan PHP Dan MySQL
by Agus Saputra

(19.899)

Membuat Aplikasi Absensi Dan Kuesioner Untuk Panduan Skripsi
by Agus Saputra

(19.110)

Aplikasi Penjualan Dan Pembelian Terintegrasi Dengan VB 6.0. Dan Data Report
by Agus Saputra, Sofyan Maulana, & Sutikno Sofjan

(17.489)

Trik Dahsyat Menjadi Web Master Dengan Framework CakePHP
by Agus Saputra

(17.113)

Aplikasi Pemesanan Tiket Online Berbasis Web Dan Android
by Akhmad Dharma Kasman

(16.656)

Membangun Aplikasi Toko Online Dengan PHP Dan SQL Server
by Agus Saputra

(15.500)

Mega Proyek 125 Juta Sistem Informasi Akademik Kampus
by Agus Saputra

(15.283)

Sistem Informasi Nilai Akademik Untuk Panduan Skripsi
by Agus Saputra

(15.153)

Teknik Cepat Membangun Aplikasi Web Dengan Framework CakePHP
by Agus Saputra

Newsletter

Masukkan email Anda untuk berlangganan informasi kami

Komentar Artikel Terakhir

  • AGUS SAPUTRA pada
    MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?
    04 April 2020 23:36:33
  • Lpk Naura pada
    MySQL Deprecated? Bagaimana Jika Sudah Terlanjur Menggunakan?
    03 April 2020 01:43:24
  • Lpk Naura pada
    Mengirim Email Otomatis dengan Cron Jobs
    03 April 2020 01:41:33
  • Lpk Naura pada
    Mengirim Email Otomatis dengan Cron Jobs
    03 April 2020 01:40:29
  • Didik pada
    Update Source Code Final Project POS Web Base dengan Smarty PHP
    25 Februari 2020 05:46:58

Komentar Buku Terakhir

  • Hijau Generasi pada
    Mengenal Web Security - Kasus Eksploitasi Web dengan Ajax
    28 Maret 2020 21:59:10
  • y. ifliandry pada
    Mega Proyek 75 Juta Aplikasi Inventory Berbasis Web
    20 Maret 2020 03:08:36
  • Subarja Yasin pada
    Mega Proyek 125 Juta Sistem Informasi Akademik Kampus
    06 Februari 2020 09:43:44
  • Fedri pada
    Proyek Membuat Website Periklanan Dengan PHP
    05 Januari 2020 18:09:17
  • er pada
    Proyek Membuat Aplikasi Forum Diskusi Dengan PHP Dan MySQL
    09 Desember 2019 09:09:27
  • Home
  • Cara Pembelian
  • Kontak
© 2023. All Rights Reserved. CV. ASFA Solution, Software Development, IT and Publishing
×
Authorization
Login
Login menggunakan jejaring sosial
Anda juga masuk menggunakan akun facebook Anda.
  • Connect
×
JOIN AGUSSAPUTRA.COM
* All fields required