Cara menggunakan datatables di php

Cara menggunakan datatables di php

Cara menggunakan datatables di php merupakan cara  menerapkan plugin datatables di php, dimana dengan datatables ini kita dipermudah dalam hal mengurutkan data, pencarian data, dan pagination. Dengan data tabel kita tidak perlu melakukan query pencarian dan juga kita tidak perlu repot-repot membuat pagination sendiri selain itu kita bisa menyesuaikan jumlah data yang ingin ditampilkan.

Cara instal datatables di php

Cara pemasangan datables itu sangat lah mudah anda bisa menggunakan secara online dan secara offline, untuk cara online nya letakkan source code ini diantara <head></head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css">
dan source code dibawah ini tepat diatas </body>
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
diatas merupakan cara pemasangan datatables secara online artinya css dan javascript nya berjalan ketika anda terhubung ke dalam internet, nah jika kalian ingin menggunakannya secara offline saya sudah menyediakannya dibawah postingan ini. Setelah instalasi ada sedikit aturan pada penulisan tag table di html agar datatables nya bisa berjalan, aturannya adalah seperti ini pada tag tabel di html anda tambahkan thead dan tbody, sebagai contoh lihat source code dibawah ini
<table id="contoh">
 <thead>
  <tr>
   <th>contoh</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>contoh</td>
  </tr>
 </tbody>
</table>
id pada tabel berfungsi untuk memberi tahu javascript tabel mana yang ingin di ubah ke datatables, dan selanjut nya tinggal kita buat javascript untuk data tabel nya, agar data javascript nya berjalan letakkan source code javascript datatabel tepat dibawah instalasi javascript data tabel, untuk source code nya seperti di bawah ini.
<script type="text/javascript">
    $(document).ready(function(){
        $('#contoh').DataTable();
    });
</script>
diatas merupakan contoh sederhana pengguaan datatables, nah sekarang kita akan implementasi nya pada halaman tampil data yang pernah kita buat sebelumnya. Berikut source code nya
    {
?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>PHP Dasar</title>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" type="text/css" href="datatabel/jquery.dataTables.css">
    </head>
    <body>
        <div class="container">
           <!--  <form method="post" action="cari.php">
                <input type="text" name="cari" id="keyword" placeholder="Cari disini">
                <span id="alert" style="color: red; display: block;">Inputan tidak boleh kosong</span>
                <input type="submit" value="Cari" name="btnCari" id="btnCari">
            </form> -->
            <div id="tampil">
            <button><a href="add.php">Tambah</a></button>
            <button><a href="fpdf/cetak.php">Export pdf</a></button>
            <button><a href="exporttoexcel.php" target="_blank">Export Excel</a></button>
            <button><a href="import.php" target="_blank">Import From Excel</a></button>
            <button id="btnLogin" class="btnLogin"><a href="logout.php">Logout</a></button>
                <table id="data_mahasiswa">
                    <thead>
                        <tr>
                            <th>No</th>
                            <th>Nim</th>
                            <th>Nama</th>
                            <th>Alamat</th>
                            <th>Asal Sekolah</th>
                            <th>No Hp</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php
                            $no = 1;
                            $sql = mysql_query("SELECT * FROM data_mahasiswa") or die(mysql_error());
                            while ($data = mysql_fetch_array($sql)) {
                                ?>
                                    <tr>
                                        <td><?=$no++?>.</td>
                                        <td><?=$data['nim']?></td>
                                        <td><?=$data['nama']?></td>
                                        <td><?=$data['alamat']?></td>
                                        <td><?=$data['asal_sekolah']?></td>
                                        <td><?=$data['no_hp']?></td>
                                        <td>
                                            <a href="data-tertentu.php?nim=<?=$data['nim']?>">Detail</a>
                                            <a href="edit.php?nim=<?=$data['nim']?>">Edit</a>
                                            <a onclick="return confirm('yakin untuk menghapus?');" href="hapus.php?nim=<?=$data['nim']?>">Hapus</a>
                                            <a href="fpdf/cetak.php?nim=<?=$data['nim']?>">Export</a>
                                        </td>
                                    </tr>
                                <?php
                            }
                        ?>
                    </tbody>
                </table>
            </div>
        </div>
        <script src="jquery-3.1.1.min.js"></script>
        <script src="datatabel/jquery.dataTables.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $('#data_mahasiswa').DataTable();
            });
        </script>
        <script src="script.js"></script>
    </body>
</html>
<?php
}
else
{
    header("location: login.php");
}
?>
Sekian tutorial mengenai cara menggunakan datatables di php semoga bermanfaat, dan jangan lupa untuk selalu mengecek daftar isi serba ngoding untuk update tutorial pemrograman web atau dengan like official fanspage facebook serba ngoding disini.

0 Response to "Cara menggunakan datatables di php"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel