我建立了一个功能性分页，但我现在遇到了一个问题，即返回的数据量使分页变大。我已经阅读了很多关于这个问题的帖子，但没有找到任何与我认为我需要的非常接近的东西。我正在寻找我的分页栏来限制页面。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"><a href="#">‹ Prev</a></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"><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>