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
INDEX.PHP
<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> </div>
Simple HTML code for render the main page. No need to worry about this page, put whatever content you want in here.
PAGING.JS
function loadData(page){ loading_show(); $.ajax ({ type: "POST", url: "load_data.php", data: "page="+page, success: function(msg) { $("#container").ajaxComplete(function(event, request, settings) { loading_hide(); $("#container").html(msg); }); } }); }
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.
DB.PHP
$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.
LOAD_DATA.PHP
//Check page exist or not if(isset($_REQUEST["page"])) { 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(); }