Pagination merupakan hal yang penting dalam sebuah website, tujuannya untuk membagi sebuah halaman atau category dalam sebuah web. Pagination sangat membantu kita dalam membagi sebuah halaman, banyang jika Anda mempunyai halam artikel dengan jumlah ribuan dan harus menggunkan scroll tanpa bantuan pagination maka itu akan sangat menyulitkan pembaca artikel Anda.Â
Dalam tutorial ini, saya akan membuat contoh pagination sederhana menggunakan jQuery AJAX dan PHP. Saya akan membaginya menjadi empat bagian, silahkan Anda simak berikut ini;
Langkah-langkah untuk mengimplementasikan pagination jQuery AJAX,
- Mengirim permintaan halaman melalui AJAX.
- Menghitung batas kueri untuk mengambil data.
- membuat links pagination.
- Menampilkan links pagination.
Mengirim Permintaan Halaman melalui AJAX
Dalam script di bawah ini, saya mengirim permintaan awal untuk halaman getresult.php. Halaman ini akan melakukan semua fungsi sisi server dan menanggapi permintaan pagination. AJAX handlers memasukkan data respons ini ke dalam selectors target.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> function getresult(url) { $.ajax({ url: url, type: "GET", data: {rowcount:$("#rowcount").val()}, success: function(data){ $("#pagination").html(data); }, error: function() {} }); } </script> <div id="pagination"> <input type="hidden" name="rowcount" id="rowcount" /> </div> <script> getresult("getresult.php"); </script> |
Menghitung batas kueri untuk mengambil data
Dalam setiap menampilkan semua data dari server membutuhkan banyak waktu maka dari itu kita membutuhkan queri limit, pagination sangat membantu kita dalam menampilakn data dengan cepat. Di sini kita harus menghitung batas awal dan akhir berdasarkan permintaan halaman. lihat script berikut,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
require_once("dbcontroller.php"); require_once("pagination.class.php"); $db_handle = new DBController(); $perPage = new PerPage(); $sql = "SELECT * from php_interview_questions"; $paginationlink = "getresult.php?page="; $page = 1; if(!empty($_GET["page"])) { $page = $_GET["page"]; } $start = ($page-1)*$perPage->perpage; if($start < 0) $start = 0; $query = $sql . " limit " . $start . "," . $perPage->perpage; $faq = $db_handle->runQuery($query); |
membuat links pagination
Untuk membuat jumlah total links halaman, kita harus melewati jumlah hasil database yang sudah kita tampilkan sebelumnya. lihat caranya di bawah ini;
|
1 2 3 4 |
if(empty($_GET["rowcount"])) { $_GET["rowcount"] = $db_handle->numRows($sql); } $perpageresult = $perPage->perpage($_GET["rowcount"], $paginationlink); |
Fungsi perpage akan membuat semua links pagination dan menerapkan style berdasarkan status halaman apakah itu aktif atau tidak aktif.
|
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 |
function perpage($count,$href) { $output = ''; if(!isset($_GET["page"])) $_GET["page"] = 1; if($this->perpage != 0) $pages = ceil($count/$this->perpage); if($pages>1) { if($_GET["page"] == 1) $output = $output . '<span class="disabled"><<</span><span class="disabled"><</span>'; else $output = $output . '<a class="link" onclick="getresult(\'' . $href . (1) . '\')" ><<</a><a class="link" onclick="getresult(\'' . $href . ($_GET["page"]-1) . '\')" ><</a>'; if(($_GET["page"]-3)>0) { if($_GET["page"] == 1) $output = $output . '<span id=1 class="current">1</span>'; else $output = $output . '<a class="link" onclick="getresult(\'' . $href . '1\')" >1</a>'; } if(($_GET["page"]-3)>1) { $output = $output . '...'; } for($i=($_GET["page"]-2); $i<=($_GET["page"]+2); $i++) { if($i<1) continue; if($i>$pages) break; if($_GET["page"] == $i) $output = $output . '<span id='.$i.' class="current">'.$i.'</span>'; else $output = $output . '<a class="link" onclick="getresult(\'' . $href . $i . '\')" >'.$i.'</a>'; } if(($pages-($_GET["page"]+2))>1) { $output = $output . '...'; } if(($pages-($_GET["page"]+2))>0) { if($_GET["page"] == $pages) $output = $output . '<span id=' . ($pages) .' class="current">' . ($pages) .'</span>'; else $output = $output . '<a class="link" onclick="getresult(\'' . $href . ($pages) .'\')" >' . ($pages) .'</a>'; } if($_GET["page"] < $pages) $output = $output . '<a class="link" onclick="getresult(\'' . $href . ($_GET["page"]+1) . '\')" >></a><a class="link" onclick="getresult(\'' . $href . ($pages) . '\')" >>></a>'; else $output = $output . '<span class="disabled">></span><span class="disabled">>></span>'; } return $output; } |
Menampilkan links pagination
Setelah script PHP di atas berhasil kita buat maka script PHP akan menghasilkan output dari database dalam bentuk HTML, kemudian akan membentuk links pagination untuk pindah halaman selanjutnya atau sebelumnya.
|
1 2 3 4 5 6 7 8 9 |
$output = ''; foreach($faq as $k=>$v) { $output .= '<div class="question"><input type="hidden" id="rowcount" name="rowcount" value="' . $_GET["rowcount"] . '" />' . $faq[$k]["question"] . '</div>'; $output .= '<div class="answer">' . $faq[$k]["answer"] . '</div>'; } if(!empty($perpageresult)) { $output .= '<div id="pagelink">' . $perpageresult . '</div>'; } print $output; |
Data yang dicetak di atas akan dibaca sebagai respons AJAX dan dimasukkan ke selector target.
|
1 2 3 4 5 6 |
success: function(data){ $("#pagination").html(data); } <div id="pagination"> // AJAX Response will be Inserted </div> |
Di bawah ini hasil dari script kita di atas tadi,
