Tuesday, 9 June 2015

Tutorial Membuat Tabel Dengan Jquery Lengkap Dengan Pagination dan Pencarian


Selamat siang rekan- rekan yang hoby dengan PHP Programming.

Sebelumnya saya pernah membuat tabel dengan php murni, disana banyak kelemahannya salah satunya adalah codingnya terlalu banyak, kita butuh coding pencarian dan pagination, untuk itu kita harus menggunakan jquery " write less do more ".

Contoh kasus yang kita buat adalah :

Kampus saya yaitu STAIN BATUSANGKAR
1. Pastikan anda telah membuka phpmyadmin di browser.
2. Buatlah sebuah database dengan nama : dbstain
3. Buatlah tabel dengan nama tbl_mahasiswa dengan isi sebagai berikut :
Kolom                      Type
---------------------------------
nim                           int (8)
nama                       varchar (35)
tgl_lahir                   date
alamat                     text
prg_studi                varchar (35)

anda juga bisa mendownloadnya di link berikut : download dbstain

sebelumnya anda harus mempunyai plugin pendukung yang bisa anda download disini
Setelah file di atas selesai di download, buka dreamweaver buat index.php dan simpan di htdocs/thr/index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Data Mahasiswa</title>
<style type="text/css">
@import "media/css/demo_table_jui.css";
@import "media/themes/ui-lightness/jquery-ui-1.8.4.custom.css";
</style> 
<script src="media/js/jquery.js"></script>
        <script src="media/js/jquery.dataTables.js"></script>
        <script type="text/javascript" charset="utf-8">
          $(document).ready(function(){
            $('#datatables').dataTable({
                         "oLanguage": {
                              "sLengthMenu": "Tampilkan _MENU_ data per halaman",
                              "sSearch": "Silahkan Cari : ",
                              "sZeroRecords": "Maaf, tidak ada data yang ditemukan",
                              "sInfo": "Menampilkan _START_ s/d _END_ dari _TOTAL_ data",
                              "sInfoEmpty": "Menampilkan 0 s/d 0 dari 0 data",
                              "sInfoFiltered": "(di filter dari _MAX_ total data)",
                              "oPaginate": {
                                  "sFirst": "First",
                                  "sLast": "Last",
                                  "sPrevious": "Previous",
                                  "sNext": "Next"
                           }
                      },
              "sPaginationType":"full_numbers",
              "bJQueryUI":true
            });
          })   
        </script>
</head>
 
<body>
<table id="datatables" class="display">
                <thead>
                    <tr>
                        <th>No</th>
                        <th>NIM</th>
                        <th>Nama Mahasiswa</th>
                        <th>Tanggal Lahir</th>
                        <th>Alamat</th>
                        <th>Program Studi</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    mysql_connect("localhost","root","");
                    mysql_select_db("dbstain");
                              $sql = mysql_query("SELECT * FROM tbl_mahasiswa ORDER BY nim");
                              $no = 1;
                    while ($mhs = mysql_fetch_array($sql)) {
                      echo "<tr>
                            <td width=40>$no</td>
                            <td>$mhs[nim]</td>
                            <td>$mhs[nama]</td>
                            <td>$mhs[tgl_lahir]</td>
                            <td>$mhs[alamat]</td>
                            <td>$mhs[prg_studi]</td>
                            </tr>";
                      $no++;
                    }                   
                    ?>
                </tbody>
            </table>
</body>
</html>

Silahkan anda copy paste kode diatas untuk menggunakannya, berikut hasil dari kode di atas :

https://drive.google.com/file/d/0BzrB0alOdNDJb01WOTNsYWQ5dHc/edit?usp=sharing

Sekian tutorial yang dapat saya berikan, mungkin kata-kata saya masih ambigu

No comments:

Post a Comment