Click here to Skip to main content
14,830,943 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I have having 3 tabs which I have written ajax in click function to get posts.

I have simplified my coding:

in document ready

JavaScript
$.ajax({
type : "GET",
url:"xxx",
data:{ method:'wire.get_posts', limit:'10', offset:'0', context:'all' },            
dataType:"json",
success:function(all_data) {
    $("#tabs-1").append(all_element);
}
});


My pagination is working if it is static content in my tab divs


And this is my pagination

JavaScript
//how much items per page to show
var show_per_page = 2; 
//getting the amount of elements inside content div
var number_of_items = $('#tabs-1').children().size();
//calculate the number of pages we are going to have
var number_of_pages = Math.ceil(number_of_items/show_per_page);

//set the value of our hidden input fields
$('#current_page').val(0);
$('#show_per_page').val(show_per_page);

//now when we got all we need for the navigation let's make it '

/* 
what are we going to have in the navigation?
- link to previous page
- links to specific pages
- link to next page
*/
var navigation_html = '<a class="previous_link">
href="java<!-- no -->script:previous();">Prev</a>';
var current_link = 0;
while(number_of_pages > current_link){
navigation_html += '<a class="page_link" href="java<!-- no -->script:go_to_page(' + current_link   <br mode=" hold=" /><br mode=" longdesc="' + current_link +'">'+ (current_link + 1) +'</a>';
current_link++;
}
navigation_html += '<a class="next_link" href="java<!-- no -->script:next();">Next</a>';

$('#page_navigation').html(navigation_html);

//add active_page class to the first page link
$('#page_navigation .page_link:first').addClass('active_page');

//hide all the elements inside content div
$('#tabs-1').children().css('display', 'none');

//and show the first n (show_per_page) elements
$('#tabs-1').children().slice(0, show_per_page).css('display', 'block');

//pagination functions
function previous(){

new_page = parseInt($('#current_page').val()) - 1;
//if there is an item before the current active link run the function
if($('.active_page').prev('.page_link').length==true){
go_to_page(new_page);
}

}

function next(){
new_page = parseInt($('#current_page').val()) + 1;
//if there is an item after the current active link run the function
if($('.active_page').next('.page_link').length==true){
go_to_page(new_page);
}

}
function go_to_page(page_num){
//get the number of items shown per page
var show_per_page = parseInt($('#show_per_page').val());

//get the element number where to start the slice from
start_from = page_num * show_per_page;

//get the element number where to end the slice
end_on = start_from + show_per_page;

//hide all children elements of content div, get specific items and show them
$('#tabs-1').children().css('display', 'none').slice(start_from, end_on).css('display', 
'block');

/*get the page link that has longdesc attribute of the current page and add active_page 
class to it
and remove that class from previously active page link*/
$('.page_link[longdesc=' + page_num 
+']').addClass('active_page').siblings('.active_page').removeClass('active_page');

//update the current page input field
$('#current_page').val(page_num);
}
//pagination functions

I append html element in ajax success



HTML:
HTML
<<pre lang="xml">div id="tabs">
<ul>
<li><a id="ui-id-1" href="#tabs-1">All</a></li>
<li><a id="ui-id-2" href="#tabs-2">Mine</a></li>
<li><a id="ui-id-3" href="#tabs-3">Friends</a></li>
</ul>

<div id="tabs-1">
</div>

<div id="tabs-2">
</div>

<div id="tabs-3">
</div>
</div>
<br>

<!-- An empty div which will be populated using jQuery -->
<div id='page_navigation'></div></pre>
when i give static content in my tab-1 div pagination works. but its not wokin when $().append is used in tab-1. My previous,next functions are out side of $doc ready.

in ajax data HOW I change the offset:'0' to offset:'10' in next page?
Posted
Updated 7-Aug-14 2:20am
v3

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900