0

我对 Play Framework（ver 1.x）中的分页模块有疑问，我已将分页设置为每页仅显示一个对象，以及控制器中的一些其他自定义设置：

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();
}

在模板中：

#{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}}*

现在，正如您在模板的最后一部分中看到的那样，有一个注释部分，使用通常的 groovy 列表标记，并且由于它有一个实际列表，我可以强制列表从给定位置“pos”开始，这然而，在使用分页的情况下是不可能的。在“items:namePaginator”的情况下，它只是底层列表的名称占位符，并不是真正可迭代的，是否有可能使分页从包装列表中的指定位置开始？

非常感谢 ！

4

1 回答 1

0

对于这种特殊的分页情况，我设法使用 JQuery 而不是使用 Play Frameworks 分页模块来解决问题。

原理是这样的，在控制器操作中，一个普通的 Java ArrayList 由我喜欢的对象组成，然后使用包含的 Gson 库（在 Play Framework 中）将此 ArrayList 转换为 jsonObject。

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

通过使用

renderArgs.put("jsonObj", jsonObj);

在将 json 传递给模板的控制器操作中，顺便说一下，我首先这样做的原因是能够从对象列表中的任何位置通过对象客户端开始“分页”，然后到隐藏在模板中的 div。

接下来我使用 JQuery 来获取列表，

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

然后再次使用 JQuery 在列表中来回移动（捕获上一个和下一个锚标记上的点击事件），并在每页显示相应的对象。使用 JQuery（或 javascript）的另一个好处是我不必担心页面重新加载，就像 Play Frameworks 分页模块一样。

jQuery部分

    $(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 部分

#{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 部分

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;
}

好的，所以这并不是调整 Play 模块的真正解决方案，而是使用 JQuery 的更实用的方法。

希望这可以帮助任何有类似问题的人。

//卡勒

于 2012-09-29T00:15:34.513 回答