Paging With Php , JQuery, My SQl
This is the tip for how to do Pagination with PHP, JQuery and MySql.
Download PHP Pagination Script
Create Database Table
CREATE TABLE messages ( msg_id INT PRIMARY KEY AUTO_INCREMENT, message TEXT );
jquery_pagination.js
Contains javascript this script works like a data controller.
$(document).ready(function()
{
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("Image may be NSFW.
Clik here to view.
");
}
//Hide Loading Image
function Hide_Load()
{
$("#loading").fadeOut('slow');
};
//Default Starting Page Results
$("#pagination li:first")
.css({'color' : '#FF0084'}).css({'border' : 'none'});
Display_Load();
$("#content").load("pagination_data.php?page=1", Hide_Load());
//Pagination Click
$("#pagination li").click(function(){
Display_Load();
//CSS Styles
$("#pagination li")
.css({'border' : 'solid #dddddd 1px'})
.css({'color' : '#0063DC'});
$(this)
.css({'color' : '#FF0084'})
.css({'border' : 'none'});
//Loading Data
var pageNum = this.id;
$("#content").load("pagination_data.php?page=" + pageNum, Hide_Load());
});
});
config.php
You have to change hostname, username, password and databasename.
pagination.php
-
'.$i.'';
}
?>
pagination_data.php
Simple php script display data from the messages table.
CSS Code
CSS code for page numbers.
#loading { width: 100%; position: absolute; } li { list-style: none; float: left; margin-right: 16px; padding:5px; border:solid 1px #dddddd; color:#0063DC; } li:hover { color:#FF0084; cursor: pointer; }