php - Jquery Pagination page number limiting -
i have functional pagination built have issue amount of data returned making pagination large. have read through lot of posts issue , havent found decently close thought needed. looking pagination bar limit pages. prev 1 2 3 4 5 6 . . . 11 next prev 1 . . . 6 7 8 9 10 11 next
jquery
$(function() { //manage users table , search form js start //loads table page 1 upon loading page. load_table(1); /*$("#users_table").tablesorter({ debug: true }); */ //upon search being clicked table loads @ first page of result set. $('#user_search_btn').click(function() { load_table(1); }); //global var clicking of pages , prev , next buttons. var page = 1; $('a.page_link').live('click', function() { //gets number assigned data-page , puts in page var. load table 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 @ current num 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 use in multiple functions. var max_pages = null; function load_table(page_num) { //function load table data providers page. passing page_num 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 rounded number of total rows divided limit. max_pages = math.ceil(data.total_rows / page_option); //clears out previous data in table , pagination bar $('#table_body').html(''); $('#pagination_list').html(''); //cycles through each row of data in json array , assigns them 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 single row json array row_show(group_id, acct_id, company, name, email, city, admin, active); }); //checks if 1 page of data no pagination bar if(max_pages > 1) { pagination(); //sets current page active class $('#page_'+page_num+'').addclass('active'); //makes previous , next buttons on bar active class when conditions 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 setup table row , 5 colmuns of data 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 above data table. $('#table_body').append(html); } function pagination() { //function make pagination bar var current_page = 1; var html = '<li id="prev"><a href="#">‹ prev</a></li>'; //loops through each page according max_pages , gives li el , el while(max_pages >= current_page) { html += '<li id="page_'+current_page+'">'; //data-page used later when clicked current page load in ajax call. html += '<a class="page_link" href="#" data-page="'+current_page+'">'+(current_page)+'</a>'; current_page++; html += '</li>'; } html += '<li id="next"><a href="#">next ›</a></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>
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 thing went wrong"); mysql_select_db($mysql_database, $bd) or die("opps thing went wrong"); ?> pagination.php
<?php include('config.php'); $per_page = 9; //calculating no of pages $sql = "select * 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 * messages order 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. should you.
Comments
Post a Comment