Simple Ajax Pagination With PHP

[RamadhanHafiz]

In this tutorial we will create a Simple Ajax Pagination With PHP. Ajax is a client-side script that communicates to a server/database without the need for a page refresh. It is mostly use by a well known websites like facebook. AJAX is a new technique for creating better, faster, and more interactive web applications. Let's start coding...

Creating The Database Connection
To create the connection copy/paste the code below and name it 'connect.php'

1. <?php
   
2. $conn
   
   =
   
   new
   
   mysqli(
   
   "localhost"
   
   ,
   
   "root"
   
   ,
   
   ""
   
   ,
   
   "db_pagination"
   
   )
   
   ;
   
3. if
   
   (
   
   !
   
   $conn
   
   )
   
   {
   
4. die
   
   (
   
   "Fatal Error: Connection Failed!"
   
   )
   
   ;
   
5. }
   
6. ?>
   

Creating A Mark Up
To create this form, just copy/paste the code below and name it 'index.php'

1. <!
   
   DOCTYPE html>
   
2. <
   
   html lang =
   
   "en"
   
   >
   
3. <
   
   head>
   
4. <
   
   link
   
   rel =
   
   "stylesheet"
   
   type =
   
   "text/css"
   
   href =
   
   "css/bootstrap.css"
   
   />
   
5. <
   
   meta charset =
   
   "UTF-8"
   
   name =
   
   "viewport"
   
   content =
   
   "width=device-width, initial-scale=1"
   
   />
   
6. </
   
   head>
   
7. <
   
   body>
   
8. <
   
   nav class
   
   =
   
   "navbar navbar-default"
   
   >
   
9. <
   
   div class
   
   =
   
   "container-fluid"
   
   >
   
10. <
    
    a class
    
    =
    
    "navbar-brand"
    
    href =
    
    "https://sourcecodester.com"
    
    >
    
    Sourcecodester</
    
    a>
    
11. </
    
    div>
    
12. </
    
    nav>
    
13. <
    
    div class
    
    =
    
    "row"
    
    >
    
14. <
    
    div class
    
    =
    
    "col-md-3"
    
    ></
    
    div>
    
15. <
    
    div class
    
    =
    
    "col-md-6 well"
    
    >
    
16. <
    
    h3 class
    
    =
    
    "text-primary"
    
    >
    
    Simple Ajax Pagination With PHP</
    
    h3>
    
17. <
    
    hr style =
    
    "border-top:1px dotted #000;"
    
    />
    
18. <
    
    div class
    
    =
    
    "table-responsive"
    
    id =
    
    "load_data"
    
    >
    
19. 
    
20. </
    
    div>
    
21. </
    
    div>
    
22. </
    
    div>
    
23. </
    
    body>
    
24. <
    
    script src =
    
    "js/jquery-3.1.1.js"
    
    >
    
    </script>
    
25. <
    
    script src =
    
    "js/ajax.js"
    
    >
    
    </script>
    
26. </
    
    html>
    

Creating The PHP Query
This is where the data will be display. To make the result display, just copy/paste the code below then name it 'book_data.php'

1. <?php
   
2. require_once
   
   'connect.php'
   
   ;
   
3. 
   
4. $record_per_page
   
   =
   
   5
   
   ;
   
5. 
   
6. $page
   
   =
   
   ""
   
   ;
   
7. $result
   
   =
   
   ""
   
   ;
   
8. 
   
9. if
   
   (
   
   ISSET
   
   (
   
   $_POST
   
   [
   
   'page'
   
   ]
   
   )
   
   )
   
   {
   
10. $page
    
    =
    
    $_POST
    
    [
    
    'page'
    
    ]
    
    ;
    
11. }
    
    else
    
    {
    
12. $page
    
    =
    
    1
    
    ;
    
13. }
    
14. 
    
15. $start
    
    =
    
    (
    
    $page
    
    -
    
    1
    
    )
    
    *
    
    $record_per_page
    
    ;
    
16. 
    
17. $q_book
    
    =
    
    $conn
    
    ->
    
    query
    
    (
    
    "SELECT * FROM `page` LIMIT $start
    
    , $record_per_page
    
    "
    
    )
    
    or die
    
    (
    
    mysqli_error
    
    (
    
    )
    
    )
    
    ;
    
18. 
    
19. $result
    
    .=
    
    "
    
20. <table class = 'table table-bordered'>
    
21. <thead>
    
22. <tr>
    
23. <th colspan = '2'><center>List of Books</center></th>
    
24. </tr>
    
25. <tr>
    
26. <th>Book #</th>
    
27. <th>Title</th>
    
28. </tr>
    
29. </thead>
    
30. <tbody>
    
31. "
    
    ;
    
32. 
    
33. while
    
    (
    
    $f_book
    
    =
    
    $q_book
    
    ->
    
    fetch_array
    
    (
    
    )
    
    )
    
    {
    
34. $result
    
    .=
    
    "
    
35. <tr>
    
36. <td style = 'width:50%;'>"
    
    .
    
    $f_book
    
    [
    
    'book_id'
    
    ]
    
    .
    
    "</td>
    
37. <td style = 'width:50%;'>"
    
    .
    
    $f_book
    
    [
    
    'title'
    
    ]
    
    .
    
    "</td>
    
38. </tr>
    
39. "
    
    ;
    
40. }
    
41. $result
    
    .=
    
    "
    
42. </tbody></table>
    
43. "
    
    ;
    
44. 
    
45. $q_page
    
    =
    
    $conn
    
    ->
    
    query
    
    (
    
    "SELECT * FROM `page`"
    
    )
    
    or die
    
    (
    
    mysqli_error
    
    (
    
    )
    
    )
    
    ;
    
46. $v_page
    
    =
    
    $q_page
    
    ->
    
    num_rows
    
    ;
    
47. $total_pages
    
    =
    
    ceil
    
    (
    
    $v_page
    
    /
    
    $record_per_page
    
    )
    
    ;
    
48. for
    
    (
    
    $i
    
    =
    
    1
    
    ;
    
    $i
    
    <=
    
    $total_pages
    
    ;
    
    $i
    
    ++
    
    )
    
    {
    
49. $result
    
    .=
    
    "<span class = 'pagination' style = 'cursor:pointer; margin:1px; padding:8px; border:1px solid #ccc;' id = '"
    
    .
    
    $i
    
    .
    
    "'>"
    
    .
    
    $i
    
    .
    
    "</span>"
    
    ;
    
50. }
    
51. $result
    
    .=
    
    "
    
52. <span class = 'pull-right'>Page of "
    
    .
    
    $page
    
    .
    
    " out of "
    
    .
    
    $total_pages
    
    .
    
    "</span>
    
53. "
    
    ;
    
54. echo
    
    $result
    
    ;
    
55. ?>
    

Creating The Ajax Script
To make the query works, we will have to make a ajax function that calls back PHP Query. Just copy/paste the code below then name it 'ajax.js'

1. $(
   
   document)
   
   .ready
   
   (
   
   function
   
   (
   
   )
   
   {
   
2. load_data(
   
   )
   
   ;
   
3. function
   
   load_data(
   
   page)
   
   {
   
4. $.ajax
   
   (
   
   {
   
5. url:
   
   'book_data.php'
   
   ,
   
6. method:
   
   'POST'
   
   ,
   
7. data:
   
   {
   
8. page:
   
   page
   
9. }
   
   ,
   
10. success:
    
    function
    
    (
    
    res)
    
    {
    
11. $(
    
    '#load_data'
    
    )
    
    .html
    
    (
    
    res)
    
    ;
    
12. }
    
13. }
    
    )
    
    ;
    
14. }
    
15. 
    
16. $(
    
    document)
    
    .on
    
    (
    
    'click'
    
    ,
    
    '.pagination'
    
    ,
    
    function
    
    (
    
    )
    
    {
    
17. $page =
    
    $(
    
    this
    
    )
    
    .attr
    
    (
    
    'id'
    
    )
    
    ;
    
18. load_data(
    
    $page)
    
    ;
    
19. }
    
    )
    
    ;
    
20. }
    
    )
    
    ;
    

The function load_data will try to send the index of the page number, and calls back the result from the PHP query.

There you have it we created a simple pagination using ajax. I hope that this tutorial helps you to your projects. For more updates and tutorials just kindly visit this site. Enjoy Coding!!

Download