Grid table sederhana dengan jQuery

Grid atau lebih dikenal dengan nama Grid Table banyak digunakan dari sisi Administrator Website. Berguna untuk menampilkan list data yang telah di input sebelumnya. Didalam grid biasanya banyak terjadi pengolahan data mulai dari Insert, select delete dan Update atau yang lebih kalian kenal dengan Nama CRUD, mengapa banyak terjadi di area ini ya karena grid sendiri saat ini sudah banyak di gabungkan dengan banyak pemrograman lain (Javascript) agar kelihatan lebih user friendly. Banyak sekali sekarang ini plugin serta Framework grid table ketika kalian Search di Google atau mesin pencari lainnya, Banyak juga programer – programer yang berbaik hati membuka code – code agar dapat dengan mudah kita modifikasi bila tidak sesuai dengan keinginan kita.

Tapi tahukah kalian dasar membuat Grid table itu? Pada artikel kali ini kita akan membuat Grid Table sederhana dengan menampilkan List data dari pemroses data. Grid table yang kita bangun disini masih perlu pengembangan agar sama dengan grid table sudah existing sekarang. Apa saja yang kita perlukan untuk pembuatan grid ini?

1. jQuery Framework.

2. PHP sebagai Server side programing.

3. CSS untuk Tampilan agar terlihat menarik.

4. HTML.

Langkah – langkahnya :

1. Buat 1 file dengan nama index.html

<html>
    <head>
        <title>isoweb Mygrid</title>
        <link href=”assets/style.css” rel=”stylesheet” type=”text/css”/>
        <script type=”text/javascript” src=”assets/jquery.min.js”></script>
        <script type=”text/javascript” src=”assets/isoweb.grid.js”></script> // Plugin yang saya buat untuk grid Table
        <script type=”text/javascript”>
            $(function(){
                $(“#testing”).isoGrid({  // Pemanggilan fungsi isowebGrid
                      url        : “proses.php” // Url pemroses data ke JSON
                     ,colModel    : [ // Header column yang akan ditampilkan
                             {display : ‘Nip.’, name : ‘nip’, width : 50}
                            ,{display : ‘Nama’, name : ‘nama’, width : 100}
                            ,{display : ‘Alamat’, name : ‘alamat’, width : 150}
                            ,{display : ‘Kelamin’, name : ‘telp’, width : 50}
                        ]                     ,height    : 100                      
                });
            });
        </script>
    </head>
    <body>
        <div id=”testing”></div> // Tampilkan Grid pada area ini.
    </body>
</html>

Cukup mudah untuk menampilkan List data dengan menggunakan Plugin dari isoweb ini namun masih ada beberapa kekurangan seperti :
– Belum ada Paging

– Manipulasi Row Grid

– CRUD Grid

Tapi untuk pemroses sederhana sudah cukup membantu untuk menampilkan data, kedepannya akan dikembangkan lagi untuk sisi paginationnya.

 

DEMO DOWNLOAD

About Administrator

2016-01-12 10:32:36 2016-01-12 14:33:42

Check Also

Create Simple Chat App with Google App Engine Backend and Google Cloud Messaging

Mari membuat aplikasi chat sederhana menggunakan backend Google App Engine (bagian dari Google Cloud Platform) dan …

Tinggalkan Balasan

Translate »
error: Konten dilindungi !!