SitePoint Sponsor

User Tag List

Results 1 to 16 of 16
  1. #1
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery, JSON, Pagenation Script

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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This should work thanks Paul.

  4. #4
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skelleex View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skelleex View Post
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skelleex View Post
    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>
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skelleex View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    not sure what you mean by fragment identifer do you have an example of what you are talking about ?

  13. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skelleex View Post
    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
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  14. #14
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #15
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,687
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by skelleex View Post
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  16. #16
    SitePoint Zealot
    Join Date
    Aug 2011
    Location
    Trinidad and Tobago
    Posts
    194
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok will try it and see how it goes


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •