Jquery, JSON, Pagenation Script

**skelleex** · Jan 6, 2012 08:45

I am looking for a tutorial to paginate JSON data. Can anyone recommend any?

**paul_wilkins** · Jan 8, 2012 05:33

Would you like a plugin that does most of the work for you instead?

jQuery pagination plugin.
Plugin: http://archive.plugins.jquery.com/project/pagination
Demo: http://d-scribe.de/webtools/jquery-p...mo_options.htm
Docs: http://d-scribe.de/webtools/jquery-p...ination/README
Download: http://www.d-scribe.de/webtools/jque...pagination.zip

**skelleex** · Jan 9, 2012 08:06

This should work thanks Paul.

**skelleex** · Feb 8, 2012 10:32

Hi Paul am having a little difficulty implementing the plugin. I have the JSON data but I need to edit it into links however I cannot seem to figure out where to do this. As the example doesn't edit the content at all. Below is a snip of my current code

Code:

function pagenationcallback(rtndata)
{
	$('#pagetitle').html("Archives");
	var data = "<ul class='table-view table-action'>";
	for(j=0;j<=rtndata.length;j++)
	{
 
         data = data + "<li><a href='#' onclick='article("+ rtndata[j].id +"); return false;'>" + rtndata[j].title + "</a></li>";	
	}
	data = data + "</ul>";
}

However if I send this data to paginate it will leave out the ul tag is there any way to fix this.

**paul_wilkins** · Feb 8, 2012 15:26

Originally Posted by skelleex

Hi Paul am having a little difficulty implementing the plugin. I have the JSON data but I need to edit it into links however I cannot seem to figure out where to do this.

The pagination documentation seems to explain how to do that. Have you thoroughly studied that?

**skelleex** · Feb 8, 2012 19:12

it seems some of the jquery code doesnt work in the version I am using so am not trying to find the equivalent of those pieces of code such as length and eq

**paul_wilkins** · Feb 8, 2012 20:11

Originally Posted by skelleex

it seems some of the jquery code doesnt work in the version I am using

Would it help us to help you if you gave us some more details, such as the version you are using?

**skelleex** · Feb 8, 2012 20:22

I am using jQuery v1.6.4 I fixed the previous error where I couldn't get the length of the JSON data however now my error lies in the following code

Code:

var new_content = $('#hiddenresult div.result:eq('+page_index+')').clone();

<--this is the example in the demo however I am trying to tweek it for my own needs like so

Code:

 var new_content = $('#hiddenresult li').eq('+page_index+').clone();

The reason for the tweak is that my content is in li tags and the original code doesn't work if I just change the div.result

**paul_wilkins** · Feb 8, 2012 21:04

Originally Posted by skelleex

I am using jQuery v1.6.4

Here's a simplified working example, that you can be used to learn from.
It uses an array of data, which means that you can make good use of the JSON data format to store your data more efficiently, and use the handlePaginationClick to create the list items that you want to display.

The part that gets things going is:

Code javascript:

var paginationItems = [
    'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6',
    'Item7', 'Item8', 'Item9', 'Item10', 'Item11', 'Item12',
    'Item13', 'Item14', 'Item15', 'Item16', 'Item17', 'Item18'
];
$("#paginationNavigation")
    .data('paginationItems', paginationItems)
    .pagination(paginationItems.length, {
        items_per_page: 4, 
        callback: handlePaginationClick
    });

And the part that controls what is displayed at each page is:

Code javascript:

function handlePaginationClick(newPageIndex, paginationNavigation) {
    var paginationItems = $(paginationNavigation).data('paginationItems'),
        startItem = newPageIndex * this.items_per_page,
        endItem = Math.min(startItem + this.items_per_page, paginationItems.length),
        i,
        newContent = '';
    // This selects 20 elements from a content array
    for (i = startItem; i < endItem; i += 1) {
        newContent += '<li>' + paginationItems[i] + '</li>';
    }
    $('#paginationContent').html(newContent);
    return false;
}

Here's some test code that shows it all working together.

Code html:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/jquery.pagination.js"></script>
<script>
$(function () {
    function handlePaginationClick(newPageIndex, paginationNavigation) {
        var paginationItems = $(paginationNavigation).data('paginationItems'),
            startItem = newPageIndex * this.items_per_page,
            endItem = Math.min(startItem + this.items_per_page, paginationItems.length),
            i,
            newContent = '';
        // This selects 20 elements from a content array
        for (i = startItem; i < endItem; i += 1) {
            newContent += '<li>' + paginationItems[i] + '</li>';
        }
        $('#paginationContent').html(newContent);
        return false;
    }
    var paginationItems = [
        'Item1', 'Item2', 'Item3', 'Item4', 'Item5', 'Item6',
        'Item7', 'Item8', 'Item9', 'Item10', 'Item11', 'Item12',
        'Item13', 'Item14', 'Item15', 'Item16', 'Item17', 'Item18'
    ];
    $("#paginationNavigation")
        .data('paginationItems', paginationItems)
        .pagination(paginationItems.length, {
            items_per_page: 4, 
            callback: handlePaginationClick
        });
});
</script>
</head>
<body>
<div id="paginationNavigation"></div>
<ul id="paginationContent">
</ul>
</body>
</html>

**skelleex** · Feb 13, 2012 12:44

I got it to work thanks. I just have one issue with it and the issue is that I cannot seem to implement history on it. For example I can move thru the different pages of articles fine but if I select an article and then hit bag the pagination list starts from the top and not from where I found the article. Is there anyway to implement this within the plugin?

**paul_wilkins** · Feb 13, 2012 14:52

Originally Posted by skelleex

I got it to work thanks. I just have one issue with it and the issue is that I cannot seem to implement history on it. For example I can move thru the different pages of articles fine but if I select an article and then hit bag the pagination list starts from the top and not from where I found the article. Is there anyway to implement this within the plugin?

Sure thing. You can set the fragment identifier to an appropriate value, which creates a new history state. Then when loading the page you can check to see if that fragment identifier contains a value. If it does, you should load the section that applies to that value.

**skelleex** · Feb 13, 2012 18:36

not sure what you mean by fragment identifer do you have an example of what you are talking about ?

**paul_wilkins** · Feb 13, 2012 18:58

Originally Posted by skelleex

not sure what you mean by fragment identifer do you have an example of what you are talking about ?

HTML 4.01 Specification - Fragment identifiers

**skelleex** · Feb 13, 2012 19:07

Ok I knew it as a hash tag but i find the function based on the page title and comma separating any additional info needed to call the correct function. eg article,45 will call the function article with a parameter of 45 or function article (45). so i know i need a pushstate function on the different Pagination links where in the script can that be done?

**paul_wilkins** · Feb 13, 2012 19:11

Originally Posted by skelleex

Ok I knew it as a hash tag but i find the function based on the page title and comma separating any additional info needed to call the correct function. eg article,45 will call the function article with a parameter of 45 or function article (45). so i know i need a pushstate function on the different Pagination links where in the script can that be done?

The standard way of doing it is to set the fragment identifier, and then run a function that gets the fragment identifier and performs an appropriate action.
That way, when loading the page you can call that same function so that if there is a fragment identifier when the page loads, the same action takes place.

An appropriate place from which to set the fragment identifier seems to be from the handlePaginationClick function.
You can use the window.location object to get and set the hash tag.

**skelleex** · Feb 13, 2012 19:19

ok will try it and see how it goes

User Tag List

Thread: Jquery, JSON, Pagenation Script

Thread Tools

Display

Jquery, JSON, Pagenation Script

Bookmarks

Bookmarks

Posting Permissions