Jquery, JSON, Pagenation Script

JavaScript
1

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

2

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-pagination/demo/demo_options.htm
Docs: http://d-scribe.de/webtools/jquery-pagination/lib/jquery_pagination/README
Download: http://www.d-scribe.de/webtools/jquery_pagination/jquery_pagination.zip

3

This should work thanks Paul.

4

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

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.

5

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

6

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

7

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

8

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

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

 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

9

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:


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:


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.


<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>
10

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?

11

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.

12

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

13

HTML 4.01 Specification - Fragment identifiers

14

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?

15

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.

16

ok will try it and see how it goes