Question

我对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 list标签，因为它有一个实际列表，我可以强制列表从给定位置开始“pos “但是，在使用分页的情况下，这是不可能的。在“items：namePaginator”的情况下，它只是底层列表的名称占位符而不是真正可迭代的，是否有可能让分页从包装列表中的指定位置开始？

非常感谢！

Answer 1

我设法使用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在列表中来回切换（在prev和next的锚标签上捕获点击事件），并在每页上显示相应的对象。使用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。

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

//卡勒

play framework-1.x分页从特定位置开始

1 个答案: