THANKS
THIS IS GREAT AND SIMPLE PIECE OF CODE THANKS MAN.
<?php $conn = new mysqli("localhost", "root", "", "db_pagination"); if(!$conn){ } ?>
<!DOCTYPE html> <html lang = "en"> <head> <meta charset = "UTF-8" name = "viewport" content = "width=device-width, initial-scale=1" /> </head> <body> <nav class = "navbar navbar-default"> <div class = "container-fluid"> <a class = "navbar-brand" href = "https://sourcecodester.com">Sourcecodester</a> </div> </nav> <div class = "row"> <div class = "col-md-3"></div> <div class = "col-md-6 well"> <h3 class = "text-primary">Simple Ajax Pagination With PHP</h3> <hr style = "border-top:1px dotted #000;"/> <div class = "table-responsive" id = "load_data"> </div> </div> </div> </body> <script src = "js/jquery-3.1.1.js"></script> <script src = "js/ajax.js"></script> </html>
<?php require_once 'connect.php'; $record_per_page = 5; $page = ""; $result = ""; $page = $_POST['page']; }else{ $page = 1; } $start = ($page - 1) * $record_per_page; $q_book = $conn->query ("SELECT * FROM `page` LIMIT $start, $record_per_page") or die(mysqli_error()); $result .=" <table class = 'table table-bordered'> <thead> <tr> <th colspan = '2'><center>List of Books</center></th> </tr> <tr> <th>Book #</th> <th>Title</th> </tr> </thead> <tbody> "; while($f_book = $q_book->fetch_array()){ $result .= " <tr> <td style = 'width:50%;'>".$f_book['book_id']."</td> <td style = 'width:50%;'>".$f_book['title']."</td> </tr> "; } $result .= " </tbody></table> "; $v_page = $q_page->num_rows; for($i = 1; $i <= $total_pages; $i++){ $result .="<span class = 'pagination' style = 'cursor:pointer; margin:1px; padding:8px; border:1px solid #ccc;' id = '".$i."'>".$i."</span>"; } $result .=" <span class = 'pull-right'>Page of ".$page." out of ".$total_pages."</span> "; echo $result; ?>
$(document).ready(function(){ load_data(); function load_data(page){ $.ajax({ url: 'book_data.php', method: 'POST', data: { page: page }, success: function(res){ $('#load_data').html(res); } }); } $(document).on('click', '.pagination', function(){ $page = $(this).attr('id'); load_data($page); }); });