Pencarian Instan Tanpa Refresh Dengan Pagination Terbaik
jika Anda mencari tutorial tentang Pencarian Data Langsung Ajax dengan Pagination di PHP Mysql menggunakan Ajax, maka Anda telah mendapatkan di halaman ini. Karena pada postingan kali ini, kami telah membuat tutorial pencarian Data Mysql Instan dengan fitur Pagination dengan menggunakan script PHP dengan Ajax dan jQuery. Jika Anda menggunakan PHP untuk pengembangan web, maka Anda telah mengetahui Pencarian Data dan Pagination, keduanya merupakan fungsionalitas yang diperlukan dari aplikasi berbasis web apa pun. Jadi, Anda harus mempelajari kedua hal tersebut, karena Search dan Pagination keduanya digunakan di sebagian besar aplikasi web berbasis PHP.
Dalam pengembangan Web, Pencarian adalah fungsionalitas paling kuat di bagian manajemen Database MySQL. Dan jika fungsi Pencarian aktif atau instan, maka secara dan dengan cepat mendapatkan data filter dari sejumlah besar data. Jika Anda Pengguna maka Anda bisa mendapatkan kumpulan data yang relevan dari daftar besar catatan dalam hitungan detik. Untuk fitur live search, disini kita menggunakan Ajax dengan script PHP. Jadi, kita bisa mendapatkan data filter di halaman web tanpa me-refresh halaman web. Jadi, dengan menggunakan Ajax dengan skrip PHP kita dapat dengan mudah mengimplementasikan fungsionalitas pencarian langsung untuk aplikasi web berbasis PHP kita.
Jika telah menggunakan fitur Live search di aplikasi web, maka ada sejumlah besar data yang telah disaring dari database Mysql, kemudian pada satu halaman web kita memuat data filter yang besar, maka itu akan memperlambat aplikasi kita. Untuk mencegah pemuatan data filter besar pada satu halaman web, di sini kami telah menggunakan fungsionalitas Pagination dari pengembangan web. Disini kita akan mengimplementasikan pagination tanpa page refresh, karena disini juga untuk Pagination kita akan menggunakan Ajax dengan script PHP. Jadi bisa dengan mudah mengimplementasikan pagination Ajax dengan script PHP. Jika telah menggunakan Ajax Pagination, maka daftar data akan lebih user friendly. Pada postingan kali ini, kita akan mengimplementasikan Ajax Live Search dengan fitur Pagination pada aplikasi PHP. Di bawah ini, disarikan sumber kode pelengkap tutorial ini dengan asumsi tidak ada permasalahan dalam pembuatan database mysql dan penamaan variabel kolom dan penguasaan PHP.
1. Buat file index.php
<!DOCTYPE html>
<html>
<head>
<title>Live Data Search with Pagination in PHP using Ajax</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="https://unpkg.com/placeholder-loading/dist/css/placeholder-loading.min.css">
</head>
<body>
<br />
<div class="container">
<h3 align="center">Live Data Search with Pagination in PHP Mysql using Ajax</h3>
<br />
<div class="card">
<div class="card-header">Data Tabel Penjualan</div>
<div class="card-body">
<div class="form-group">
<input type="text" name="search_box" id="search_box" class="form-control" placeholder="Type your search query here" />
</div>
<div class="table-responsive" id="dynamic_content">
</div>
</div>
</div>
</div>
</body>
</html>
2. Buat file daftartabel.php.
<?php
$connect = new PDO("mysql:host=localhost; dbname=testing", "root", "");
/*function get_total_row($connect)
{
$query = "
SELECT * FROM tbl_hasanahtoko.com
";
$statement = $connect->prepare($query);
$statement->execute();
return $statement->rowCount();
}
$total_record = get_total_row($connect);*/
$limit = '5';
$page = 1;
if($_POST['page'] > 1)
{
$start = (($_POST['page'] - 1) * $limit);
$page = $_POST['page'];
}
else
{
$start = 0;
}
$query = "
SELECT * FROM tbl_hasanahtoko.com
";
if($_POST['query'] != '')
{
$query .= '
WHERE tbl_hasanahtoko.com judul LIKE "%'.str_replace(' ', '%', $_POST['query']).'%"
';
}
$query .= 'ORDER BY tbl_hasanahtoko.com_id ASC ';
$filter_query = $query . 'LIMIT '.$start.', '.$limit.'';
$statement = $connect->prepare($query);
$statement->execute();
$total_data = $statement->rowCount();
$statement = $connect->prepare($filter_query);
$statement->execute();
$result = $statement->fetchAll();
$total_filter_data = $statement->rowCount();
$output = '
<label>Total Records - '.$total_data.'</label>
<table class="table table-striped table-bordered">
<tr>
<th>ID</th>
<th>Post Title</th>
</tr>
';
if($total_data > 0)
{
foreach($result as $row)
{
$output .= '
<tr>
<td>'.$row["webslesson_post_id"].'</td>
<td>'.$row["webslesson_post_title"].'</td>
</tr>
';
}
}
else
{
$output .= '
<tr>
<td colspan="2" align="center">No Data Found</td>
</tr>
';
}
$output .= '
</table>
<br />
<div align="center">
<ul class="pagination">
';
$total_links = ceil($total_data/$limit);
$previous_link = '';
$next_link = '';
$page_link = '';
//echo $total_links;
if($total_links > 4)
{
if($page < 5)
{
for($count = 1; $count <= 5; $count++)
{
$page_array[] = $count;
}
$page_array[] = '...';
$page_array[] = $total_links;
}
else
{
$end_limit = $total_links - 5;
if($page > $end_limit)
{
$page_array[] = 1;
$page_array[] = '...';
for($count = $end_limit; $count <= $total_links; $count++)
{
$page_array[] = $count;
}
}
else
{
$page_array[] = 1;
$page_array[] = '...';
for($count = $page - 1; $count <= $page + 1; $count++)
{
$page_array[] = $count;
}
$page_array[] = '...';
$page_array[] = $total_links;
}
}
}
else
{
for($count = 1; $count <= $total_links; $count++)
{
$page_array[] = $count;
}
}
for($count = 0; $count < count($page_array); $count++)
{
if($page == $page_array[$count])
{
$page_link .= '
<li class="page-item active">
<a class="page-link" href="#">'.$page_array[$count].' <span class="sr-only">(current)</span></a>
</li>
';
$previous_id = $page_array[$count] - 1;
if($previous_id > 0)
{
$previous_link = '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page_number="'.$previous_id.'">Previous</a></li>';
}
else
{
$previous_link = '
<li class="page-item disabled">
<a class="page-link" href="#">Previous</a>
</li>
';
}
$next_id = $page_array[$count] + 1;
if($next_id >= $total_links)
{
$next_link = '
<li class="page-item disabled">
<a class="page-link" href="#">Next</a>
</li>
';
}
else
{
$next_link = '<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page_number="'.$next_id.'">Next</a></li>';
}
}
else
{
if($page_array[$count] == '...')
{
$page_link .= '
<li class="page-item disabled">
<a class="page-link" href="#">...</a>
</li>
';
}
else
{
$page_link .= '
<li class="page-item"><a class="page-link" href="javascript:void(0)" data-page_number="'.$page_array[$count].'">'.$page_array[$count].'</a></li>
';
}
}
}
$output .= $previous_link . $page_link . $next_link;
$output .= '
</ul>
</div>
';
echo $output;
?>
Demkian tutorial pencarian instan dan pagination dengan harapan semoga bermanfaat.
Source code: Weblesson
