First of all,  See more about source code, download link below.

Here is the list of files and folder in this tutorial:

  • index.php – main file of program.
  • paging.js – this js contain ajax help us run paging for index.php file.
  • load_data.php - process in server and return pagination result.
  • db.php - connect to database
  • paging_ajax.php – library contain pagination code, MUST INCLUDE.
  • css.css – Css for html code.

Now is more details about each file


<div align="center" ><h1>DuKa Web - Pagination with jQuey ajax, PHP & MYSQL</h1></div>
<div id="loading"></div>
<div id="container">
    <div class="data"></div>
  <div class="pagination"></div>

Simple HTML code for render the main page. No need to worry about this page, put whatever content you want in here.


function loadData(page){
        type: "POST",
        url: "load_data.php",
        data: "page="+page,
        success: function(msg)
            $("#container").ajaxComplete(function(event, request, settings)

The javascript file. loadData() function will be called each time we click on page number. It sends a data which contains page number to load_data php function for process and display again in our page. With this ajax function, our page won’t be reload again.

The key in here is jQuery ajax() function.


$mysql_hostname = "localhost";   // host MySQL
$mysql_user = "root";     // username MySQL
$mysql_password = "";    // password MySQL
$mysql_database = "fortest"; // database name

$db = mysql_connect($mysql_hostname, $mysql_user, $mysql_password) or die("CAN NOT CONNECT DATABASE");
mysql_select_db($mysql_database, $db) or die("CAN NOT SELECT DATABASE");

mysql_query("SET NAMES 'utf8'", $db);
/* mysql_set_charset('utf8',$db); */

Connect to database. Change hostname, user and password to match with yours.


//Check page exist or not
 include "db.php";
 require_once "paging_ajax.php";
 $paging = new paging_ajax();

 // Set class to paging element
 $paging->class_pagination = "pagination";
 $paging->class_active = "active";
 $paging->class_inactive = "inactive";
 $paging->class_go_button = "go_button";
 $paging->class_text_total = "total";
 $paging->class_txt_goto = "txt_go_button";

 // Number elements per page
    $paging->per_page = 5;  

    // Get Page value
    $paging->page = $_REQUEST["page"];

    // Query to get database
    $paging->text_sql = "SELECT * FROM ajax";
    $result_pag_data = $paging->GetResult();

 $message = "";

 while ($row = mysql_fetch_array($result_pag_data)) {
  $message .= "<li><strong>" . $row['ID'] . "</strong> " . $row['content'] . "</li>";

 $paging->data = "<div class='data'><ul>" . $message . "</ul></div>"; // Content for Data
 echo $paging->Load();