Jquery Pagination page number limiting - php

Question

I have a functional pagination I built but I now have an issue where the amount of data returned is making the pagination large. I have read through a lot of posts about this issue and havent found anything that was decently close to what I thought I needed. I am looking for my pagination bar to limit the pages. Prev 1 2 3 4 5 6 . . . 11 Next Prev 1 . . . 6 7 8 9 10 11 Next
Jquery
$(function() { //Manage Users Table and Search form JS Start
//loads table page 1 upon loading page.
load_table(1);
/*$("#users_table").tablesorter({
debug: true
}); */
//upon search being clicked the table loads at the first page of result set.
$('#user_search_btn').click(function() {
load_table(1);
});
//global var for the clicking of pages and prev and next buttons.
var page = 1;
$('a.page_link').live('click', function() { //gets the number assigned to the data-page and puts it in page var. load table for page
page = $(this).data('page');
load_table(page);
});
$('#prev').live('click', function() {
//truthy loads page 1 if page - 1 equals 0. falsey loads page - 1.
if(page - 1 == 0) {
page = page;
$('#prev a').removeAttr('href');
}
else {
page = page - 1;
load_table(page);
}
});
$('#next').live('click', function() {
//truthy loads page at its current num which is also max_page
if(page + 1 > max_pages) {
page = page;
$('#next a').removeAttr('href');
}
//falsey loads page if hasnt hit max limit yet + 1
else {
page = page + 1;
load_table(page);
}
});
});
//sets gloabl var to use in multiple functions.
var max_pages = null;
function load_table(page_num) { //function to load the table with data from the providers page. passing a page_num for ajax call reuse.
var search_name = $('#user_name_input').val();
var search_email = $('#user_email_input').val();
var search_company = $('#manage_company_input').val();
var admin_option = $('#admin_user_dropdown option:selected').val();
var active_option = $('#active_user_dropdown option:selected').text();
var page_option = $('#page_limit_dropdown option:selected').val();
$.ajax({
type: 'POST',
url: 'providers/manage_users.php',
data: {mode: 'table_data', company: search_company, name: search_name, email: search_email, admin: admin_option, active: active_option, page_limit: page_option, page_num: page_num},
dataType: 'json',
success: function(data) {
if(data.success == true) {
// sets max_pages each to a rounded up number of the total rows divided by the limit.
max_pages = Math.ceil(data.total_rows / page_option);
//clears out previous data in the table and pagination bar
$('#table_body').html('');
$('#pagination_list').html('');
//Cycles through each row of data in the json array and assigns them to vars.
$.each(data.row, function(j, object) {
var group_id = (object.group_id);
var acct_id = (object.acct_id);
var company = (object.company);
var first_name = (object.first_name);
var last_name = (object.last_name);
var name = (first_name + ' ' + last_name);
var email = (object.email);
var city = (object.city);
var admin = (object.admin);
var active = (object.active);
if(active == 1) {
active = 'yes';
}
else {
active = 'no';
}
//sets each row to a single row from json array
row_show(group_id, acct_id, company, name, email, city, admin, active);
});
//checks if only 1 page of data no pagination bar
if(max_pages > 1) {
pagination();
//sets the current page to the active class
$('#page_'+page_num+'').addClass('active');
//makes the previous and next buttons on the bar active class when conditions are met.
if(page_num == 1) {
$('#prev').addClass('active');
}
if(page_num == max_pages) {
$('#next').addClass('active');
}
}
}
}
});
}
function row_show(group_id, acct_id, company, name, email, city, admin, active){ //function to setup the table row and 5 colmuns of data that the ajax call cycles through.
var html = '\
<tr>\
<td><div><a title="'+company+'" id="company_'+group_id+'" href="edit_facility.php?id='+group_id+'">'+company+'</a></div></td>\
<td><div><a title="'+email+'" id="company_'+acct_id+'" href="edit_user.php?id='+acct_id+'">'+email+'</a></div></td>\
<td><div>'+name+'</div></td>\
<td><div>'+city+'</div></td>\
<td><div>'+admin+'</div></td>\
<td><div>'+active+'</div></td>\
</tr>';
//attachs the above data to the table.
$('#table_body').append(html);
}
function pagination() { //function to make the pagination bar
var current_page = 1;
var html = '<li id="prev">‹ Prev</li>';
//loops through each page according to max_pages and gives it a li el and a el
while(max_pages >= current_page) {
html += '<li id="page_'+current_page+'">';
//data-page used later when clicked to get the current page to load in the ajax call.
html += '<a class="page_link" href="#" data-page="'+current_page+'">'+(current_page)+'</a>';
current_page++;
html += '</li>';
}
html += '<li id="next">Next ›</li>';
$('#pagination_list').append(html);
}
HTML
<table id="users_table" class="tablesorter table table-bordered table-condensed">
<thead id="table_head">
<td><strong>Company</strong></td>
<td><strong>Email</strong></td>
<td><strong>Name</strong></td>
<td><strong>City</strong></td>
<td><strong>Role</strong></td>
<td><strong>Active</strong></td>
</thead>
<tbody id="table_body">
</tbody>
</table>
<div id="user_pagination" class="pagination pagination-centered">
<ul id="pagination_list">
</ul>
</div>

Answer 1

CREATE TABLE messages
(
msg_id INT PRIMARY KEY AUTO_INCREMENT,
message TEXT
);
jquery_pagination.js
$(document).ready(function()
{
//Display Loading Image
function Display_Load()
{
$("#loading").fadeIn(900,0);
$("#loading").html("<img src="bigLoader.gif" />");
}
//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
<?php
$mysql_hostname = "localhost";
$mysql_user = "username";
$mysql_password = "password";
$mysql_database = "database";
$bd = mysql_connect($mysql_hostname, $mysql_user, $mysql_password)
or die("Opps some thing went wrong");
mysql_select_db($mysql_database, $bd)
or die("Opps some thing went wrong");
?>
pagination.php
<?php
include('config.php');
$per_page = 9;
//Calculating no of pages
$sql = "select * from messages";
$result = mysql_query($sql);
$count = mysql_num_rows($result);
$pages = ceil($count/$per_page)
?>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="jquery_pagination.js"></script>
<div id="loading" ></div>
<div id="content" ></div>
<ul id="pagination">
<?php
//Pagination Numbers
for($i=1; $i<=$pages; $i++)
{
echo '<li id="'.$i.'">'.$i.'</li>';
}
?>
</ul>
pagination_data.php
<?php
include('config.php');
$per_page = 9;
if($_GET)
{
$page=$_GET['page'];
}
$start = ($page-1)*$per_page;
$sql = "select * from messages order by msg_id limit $start,$per_page";
$result = mysql_query($sql);
?>
<table width="800px">
<?php
while($row = mysql_fetch_array($result))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<tr>
<td><?php echo $msg_id; ?></td>
<td><?php echo $message; ?></td>
</tr>
<?php
}
?>
</table>
CSS Code
#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;
}
Try this. It should help you.