Cara Menggunakan JQuery DataTable

Pada kali ini saya akan memberikan tutorial Cara Menggunakan JQuery DataTable. Datatable adalah salah satu plugin dari jQuery. Datatable digunakan untuk menampilkan data dalam bentuk grid (table).
Beberapa Fitur yang ada pada Datatable diantaranya :

Searching ( Pencarian Data)
Sorting ( Mengurutkan Data Berdasarkan Header Kolom)
Pagging ( Halaman )
Batas tampilan data perhalaman dalam bentuk combobox.

Tuliskan Script HTML ini ke notepad ++ ataupun editor lainnya :

<!DOCTYPE HTML>
<html>
<head>
<title> Penggunaan Table Secara Manual</title>
</head>
<body>
<table border="1">
<caption> Contoh pembuatan table Secara manual</caption>
<thead>
<tr>
<th>Toko</th>
<th>Barang 1</th>
<th>Barang 2</th>
<th>Barang 3</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td>10.000</td>
<td>20.000</td>
<td>30.000</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Pasar Anyer</td>
<td>2000</td>
<td>6000</td>
<td>9000</td>
</tr>
<tr>
<td>Mall</td>
<td>8000</td>
<td>14000</td>
<td>21000</td>
</tr>
</tbody>
</table>
</body>
</html>

Simpan file tersebut dengan nama terserah anda namun berextesi html. Lalu jalakan script html tersebut di browser maka akan muncul tampilan seperti ini

Hasilnya akan tidak enak dilihat bukan? sekarang saya akan coba menggunakan datatables ke dalam script diatas.

Pertama Download Terlebih dahulu jQuery DataTables di http://www.datatables.net/download/index

Lalu ekstak File yang sudah di download di 1 folder dengan file html yang sudah di buat sebelumnya. ekstrak menggunakan Winrar Maupun Winzip.

Rename folder DataTables-x.x menjadi datatables

Setelah itu lakukan pengeditan pada script html tadi menjadi seperti

<!DOCTYPE HTML>

<html>

<head>

    <title>Penggunaan Table Secara Manual</title>

    <script type="text/javascript" src="datatables/media/js/jquery.js"></script><script type="text/javascript" src="datatables/media/js/jquery.dataTables.js"></script><script type="text/javascript" src="datatables/media/js/jquery.dataTables.min.js"></script>

    <link href="datatables/media/css/jquery.dataTables.css" rel="stylesheet" type="text/css" /><!--<link type="text/css" rel="stylesheet" href="datatables/media/css/jquery.dataTables.min.css"/>--><!--<link type="text/css" rel="stylesheet" href="datatables/media/css/jquery.dataTables_themeroller.css"/>--><script type="text/javascript">

 $(document).ready(function() {

    $('#belajar').dataTable();

 } );

</script>

</head>

<body>

<table align="center" class="display" id="belajar">

    <caption>Contoh pembuatan Table Menggunakan Datatables</caption>

    <thead>

        <tr>

            <th>Toko</th>

            <th>Barang 1</th>

            <th>Barang 2</th>

            <th>Barang 3</th>

        </tr>

    </thead>

    <tbody>

        <tr>

            <td>Pasar Anyer</td>

            <td>2000</td>

            <td>6000</td>

            <td>9000</td>

        </tr>

        <tr>

            <td>Mall</td>

            <td>8000</td>

            <td>14000</td>

            <td>21000</td>

        </tr>

    </tbody>

    <tfoot>

        <tr>

            <td>Total</td>

            <td>10.000</td>

            <td>20.000</td>

            <td>30.000</td>

        </tr>

    </tfoot>

</table>

</body>

</html>

Maka Hasilnya akan seperti ini

Semoga bermanfaat dan selamat berexperimen :)

Reza Juliandri

Cara Menggunakan JQuery DataTable

1 comment

Informasi Populer

Popular

Arsip Blog