Quantcast
Channel: Web Developer Source » AJAX
Viewing all articles
Browse latest Browse all 4

How to do Pagination with PHP, JQuery and MySql?

0
0

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("");
}
//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; 
}

Viewing all articles
Browse latest Browse all 4

Latest Images

Trending Articles





Latest Images