Cara Membuat Kolom Sort pada Tabel Tanpa Loading Menggunakan Ajax dan PHP

Cara Membuat Kolom Sort pada Tabel Menggunakan Ajax dan PHP – Hai ketemu lagi dengan saya dewan komputer dan pada kesempatan kali ini saya akan memposting tentang cara membuat kolom sort yang ada pada header tabel menggunakan Ajax pada PHP sehingga bisa kita buat tanpa loading. Berbeda dengan jika kita menggunakan plugin untuk membuat tabel seperti datatable dan lainnya, jika kita buat manual kita juga bisa membuat kolom sort jika header tabel di klik yang akan merubah menjadi sord ascending ke descending atau dari descending ke ascending. Untuk membuatnya sobat tinggal ikuti langkah-langkah dibawah ini :

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

CREATE TABLE `tbl_karyawan`  (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,
  `umur` int(11) NOT NULL,
  `foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,
  PRIMARY KEY (`id`) USING BTREE
)

CREATE TABLE `tbl_karyawan` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL,

`umur` int(11) NOT NULL,

`foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL,

PRIMARY KEY (`id`) USING BTREE

)

3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini

INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png');
INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png');
INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png');
INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png');
INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png');

INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png');

INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png');

INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');

Cara Membuat Kolom Sort

Setelah database sudah dibuat selanjutnya kita baru membuat datanya ditampilkan ke dalam tabel dan membuat sortnya. Berikut langkah-langkahnya :

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');

// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>

<?php

define('HOST','localhost');

define('USER','root');

define('PASS','');

define('DB1', 'db_dewankomputer');

// Buat Koneksinya

$db1 = new mysqli(HOST, USER, PASS, DB1);

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js.

3. Masih di file index.php sobat tambahkan kode dibawah pada tag <body>…</body>

<nav class="navbar navbar-dark bg-primary">
  <a class="navbar-brand" href="index.php" style="color: #fff;">
    Dewan Komputer
  </a>
</nav>

 <div class="container" align="center">
    <h3 class="text-center">Sort Kolom Tabel dengan Ajax JQuery pada PHP</h3><br />
    <div class="table-responsive" id="tabel_karyawam">
      <table class="table table-bordered">
        <tr>
          <th>No</th>
          <th><a class="column_sort" id="nama_lengkap" data-order="desc" href="#">Nama Lengkap</a></th>
          <th><a class="column_sort" id="alamat" data-order="desc" href="#">Alamat</a></th>
          <th><a class="column_sort" id="jenkel" data-order="desc" href="#">Jenis Kelamin</a></th>
          <th><a class="column_sort" id="jabatan" data-order="desc" href="#">Jabatan</a></th>
          <th><a class="column_sort" id="umur" data-order="desc" href="#">Umur</a></th>
        </tr>
        <?php
          $no=1;
          $query = "SELECT * FROM tbl_karyawan ORDER BY nama_lengkap ASC";
          $dewan1 = $db1->prepare($query);
          $dewan1->execute();
          $res1 = $dewan1->get_result();
          while ($row = $res1->fetch_assoc()) {
        ?>  
        <tr>  
            <td><?php echo $no++; ?></td>
            <td><?php echo $row["nama_lengkap"]; ?></td>
            <td><?php echo $row["alamat"]; ?></td>
            <td><?php echo $row["jenkel"]; ?></td>
            <td><?php echo $row["jabatan"]; ?></td>
            <td><?php echo $row["umur"]; ?></td>
        </tr>
        <?php } ?>
      </table>
    </div>
 </div>

Dewan Komputer

</a>

</nav>

<h3 class="text-center">Sort Kolom Tabel dengan Ajax JQuery pada PHP</h3><br />

<tr>

<th><a class="column_sort" id="nama_lengkap" data-order="desc" href="#">Nama Lengkap</a></th>

<th><a class="column_sort" id="alamat" data-order="desc" href="#">Alamat</a></th>

<th><a class="column_sort" id="jenkel" data-order="desc" href="#">Jenis Kelamin</a></th>

<th><a class="column_sort" id="jabatan" data-order="desc" href="#">Jabatan</a></th>

</tr>

<?php

$no=1;

$query = "SELECT * FROM tbl_karyawan ORDER BY nama_lengkap ASC";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

while ($row = $res1->fetch_assoc()) {

<tr>

</tr>

<?php } ?>

</table>

</div>

4. Masih pada file index.php, selanjutanya kita buat script ajaxnya yang berfungsi sebagai action jika kita klik pada header kolom. Scriptnya adalah sebagai berikut :

<script>
   $(document).ready(function(){
      $(document).on('click', '.column_sort', function(){
         var nama_kolom = $(this).attr("id");
         var order = $(this).data("order");
         var arrow = '';
         if(order == 'desc'){
              arrow = '&nbsp;<span class="fa fa-arrow-down"></span>';
         } else {
              arrow = '&nbsp;<span class="fa fa-arrow-up"></span>';
         }
         $.ajax({
            url:"sort.php",
            method:"POST",
            data:{nama_kolom:nama_kolom, order:order},
            success:function(data)
            {
                 $('#tabel_karyawam').html(data);
                 $('#'+nama_kolom+'').append(arrow);
            }
         })
      });
   });
</script>

$(document).ready(function(){

$(document).on('click', '.column_sort', function(){

var nama_kolom = $(this).attr("id");

var order = $(this).data("order");

var arrow = '';

if(order == 'desc'){

arrow = ' <span class="fa fa-arrow-down"></span>';

} else {

arrow = ' <span class="fa fa-arrow-up"></span>';

}

$.ajax({

url:"sort.php",

method:"POST",

data:{nama_kolom:nama_kolom, order:order},

success:function(data)

{

$('#tabel_karyawam').html(data);

$('#'+nama_kolom+'').append(arrow);

}

})

});

</script>

5. Seperti yang terlihat pada script ajax diatas, kita memanggil file sort.php jadi kita perlu membuatnya dan isikan dengan kode dibawah

<?php
  include 'koneksi.php';

  $output = '';
  $order = $_POST["order"];
  if($order == 'desc'){
      $order = 'asc';
  } else {
    $order = 'desc';
  }

  $nama_kolom = $_POST["nama_kolom"];
  $orderby = $_POST["order"];

  $query = "SELECT * FROM tbl_karyawan ORDER BY ". $nama_kolom ." ". $orderby ."";
  $dewan1 = $db1->prepare($query);
  $dewan1->execute();
  $res1 = $dewan1->get_result();

  $output .= '
  <table class="table table-bordered">
      <tr>
           <th>No</th>
           <th><a class="column_sort" id="nama_lengkap" data-order="'.$order.'" href="#">Nama Lengkap</a></th>
           <th><a class="column_sort" id="alamat" data-order="'.$order.'" href="#">Alamat</a></th>
           <th><a class="column_sort" id="jenkel" data-order="'.$order.'" href="#">Jenis Kelamin</a></th>
           <th><a class="column_sort" id="jabatan" data-order="'.$order.'" href="#">Jabatan</a></th>
           <th><a class="column_sort" id="umur" data-order="'.$order.'" href="#">Umur</a></th>
      </tr>
  ';
  $no=1;
  while ($row = $res1->fetch_assoc()) {
      $output .= '
      <tr>
           <td>' . $no++ . '</td>
           <td>' . $row["nama_lengkap"] . '</td>
           <td>' . $row["alamat"] . '</td>
           <td>' . $row["jenkel"] . '</td>
           <td>' . $row["jabatan"] . '</td>
           <td>' . $row["umur"] . '</td>
      </tr>
      ';  
  }
  $output .= '</table>';
  echo $output;
?>

<?php

include 'koneksi.php';

$output = '';

$order = $_POST["order"];

if($order == 'desc'){

$order = 'asc';

} else {

$order = 'desc';

}

$nama_kolom = $_POST["nama_kolom"];

$orderby = $_POST["order"];

$query = "SELECT * FROM tbl_karyawan ORDER BY ". $nama_kolom ." ". $orderby ."";

$dewan1 = $db1->prepare($query);

$dewan1->execute();

$res1 = $dewan1->get_result();

$output .= '

<tr>

<th><a class="column_sort" id="nama_lengkap" data-order="'.$order.'" href="#">Nama Lengkap</a></th>

<th><a class="column_sort" id="alamat" data-order="'.$order.'" href="#">Alamat</a></th>

<th><a class="column_sort" id="jenkel" data-order="'.$order.'" href="#">Jenis Kelamin</a></th>

<th><a class="column_sort" id="jabatan" data-order="'.$order.'" href="#">Jabatan</a></th>

</tr>

$no=1;

while ($row = $res1->fetch_assoc()) {

$output .= '

<tr>

<td>' . $row["nama_lengkap"] . '</td>

<td>' . $row["alamat"] . '</td>

<td>' . $row["jenkel"] . '</td>

<td>' . $row["jabatan"] . '</td>

</tr>

}

$output .= '</table>';

echo $output;

6. Jalankan project sobat, jika sudah benar maka tampilannya akan menjadi seperti dibawah

Jika sobat sudah mengikuti langkah-langkah diatas seharusnya sudah benar dan hasilnya akan seperti gambar dibawah. Pada contoh diatas kita bisa sort semua kolom kecuali kolom nomor. Sekian postingan saya tentang Cara Membuat Kolom Sort pada Tabel Tanpa Loading Menggunakan Ajax dan PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..