Question

I have a question on pagination module in Play Framework ( ver 1.x),
i have setup pagination to only show one object per page, and some other customized settings,
in the controller:

import java.util.ArrayList;
import java.util.List;

import play.modules.paginate.ValuePaginator;
import play.mvc.Controller;

public class Application extends Controller {

public static void index() {

    List<String> strings = new ArrayList<String>();
    strings.add("Kalle");
    strings.add("Karin");
    strings.add("Dixie");
    strings.add("Edvin");
    strings.add("Gustav");
    strings.add("Axel");

    int pos = 0;

    for(String str : strings){
        if(str.equals("Axel")){
            pos += strings.indexOf(str);
            break;
        }
    }

    ValuePaginator namePaginator = new ValuePaginator(strings);
    namePaginator.setPageSize(1);
    namePaginator.setBoundaryControlsEnabled(false);
    namePaginator.setPagesDisplayed(0);

    renderArgs.put("pos", pos);
    renderArgs.put("namePaginator", namePaginator);
    render();
}

And in the template:

#{extends 'main.html' /}
#{set title:'Home' /}

*{#{welcome /}}*
${pos}
#{paginate.controls items:namePaginator /}

#{paginate.list items:namePaginator, as:'name'}
${name}
#{/paginate.list}

*{#{list items:strings[pos], as:'string'}
${string}
#{/list}}*  

Now, as you might see in the last part of the template, there is a commented part, using the usual groovy list tag, and since it has an actual list i can force the list to start at a given position “pos”, this is however not possible in the case of using the pagination.
In the case of the “items:namePaginator” it is merely a name placeholder for the underlying list and not really iterable, is there possibly a way of making the pagination start at a specified position within the wrapped list?

Thanks a lot !

Answer 1

I managed to solve the problem using JQuery instead of using Play Frameworks pagination module for this special case of pagination.

Principle goes like this, in the controllers action a normal Java ArrayList consisting of objects to my liking, this ArrayList is then converted to a jsonObject using the included Gson library (in Play Framework).

Gson gson = new Gson();
String jsonObj = gson.toJson(objects);

By using

renderArgs.put("jsonObj", jsonObj);

in the controller action to pass the json to the template, by the way my reason for doing all this in the first place was to be able to start “paginating” thru the objects clientside from any position in the list of objects, and to a hidden div in the template.

Next on i use JQuery to pick up the list,

$.parseJSON($('#myhiddenlist'));

And then again using JQuery to step back and forth (catching click events on anchor tags for prev and next) thru the list, and displaying the respective object per page.
Another upside of using JQuery (or javascript for that matter), is that i don’t have to worry about page reload, as is the case with Play Frameworks pagination module.

JQuery-part

    $(function(){
    var ourlist = $('#ourlist').text();
    var jsonOur = $.parseJSON(ourlist);
    var length = jsonOur.length; 
    var pos = parseInt($('#ourpos').text());
    var showList = $('#showlist');


    showList.append(jsonOur[pos].name);
    initControls();

    function hasPrev(){
        if(pos > 0){
            return true;
        }else{
            return false;   
        }
    }

    function hasNext(){
        if(pos < (length - 1)){
            return true;    
        }else{
            return false;
        }

    }

    function showItem(pos){
        showList.empty();
        showList.append(jsonOur[pos].name);
    }

    $('.previous a').click(function(e){

        if(hasPrev()){pos--;}
        if(hasPrev()){
                $('li.next').removeClass('off');
                $('li.next a').css('color', 'blue');
        }else{
            $('li.previous').addClass('off');
            $('li.previous.off a').css('color', 'grey');
        }
        showItem(pos);
    });

    $('.next a').click(function(e){

        if(hasNext()){pos++;}
        if(hasNext()){
            $('li.previous').removeClass('off');
            $('li.previous a').css('color', 'blue');
        }else{
            $('li.next').addClass('off');
            $('li.next.off a').css('color', 'grey');
        }
        showItem(pos);
    });

    function initControls(){
        if(hasNext()){
            $('li.previous').removeClass('off');
        }else{
            $('li.next').addClass('off');
            $('li.next.off a').css('color', 'grey');
        }
        if(hasPrev()){
                $('li.next').removeClass('off');
        }else{
            $('li.previous').addClass('off');
            $('li.previous.off a').css('color', 'grey');
        }
    }

    //for testing only
    function showPos(pos){
        console.log(pos);
    }
});

HTML part

#{extends 'main.html' /}
#{set title:'Home' /}
#{content.rightside Pos: pos /}<!-- loads the side content -->
<div id="ourlist" class="hide">${jsonOurList}</div>
<div id="ourpos" class="hide">${pos}</div>
<ul class="pagination">
<li class="previous"><a href="#">Prev</a></li>
<li class="next"><a href="#">Next</a></li>
</ul>
<div id="showlist"></div>

CSS part

ul.pagination li {
display: inline;
}
ul.pagination li a {
outline: none;
text-decoration: none;
}
li.previous.off a,
li.next.off a {
color: grey;
cursor: default;
}
li.previous a,
li.next a {
color: blue;
cursor: pointer;
}
.hide {
display: none;
}

Ok, so this is not really a solution for tweaking the Play module, but a more pragmatic approach, using JQuery.

Hope this might help anyone having a similar problem.

//Kalle