Question

我正在寻找一个简单的jsf解决方案来处理可收藏的，基于参数的数据表分页。

实际上我使用ajax方法和cookie来存储活动页面。当用户点击F5或点击数据表行中的链接然后返回“浏览器返回”时，我会检查cookie以显示最后一个活动页面。

<h:commandLink value="Next Page">
    <f:ajax listener="#{bean.nextPage}" render="dataTable"/>
</h:commandLink>

@ViewScoped
public class PagerBean  {

   public void nextPage() {
      this.resultList = Products.getNextProducts(getFirstResult(),getMaxResult());
      addCookie("activePage", getActivePage());
   }
}

@ViewScoped
public class ProductBean  {

   @ManagedProperty(value="#{pager}")
   protected PagerBean pager;

   @Postconstruct
   public void init() {

      if (isCookie("activePage"){
         pager.setActivePage(getCookie("activePage"));
      }     
   } 
}

但是，我正在寻找一个可收藏的解决方案，以便我们可以生成具有特定网址参数的链接，这些参数也可以通过浏览器后退/前进按钮进行跟踪。

http://foo.com/products?page=1
http://foo.com/products?page=2
http://foo.com/products?page=3


<h:link  outcome="/pages/markets/products">                 
   <f:param name="page" value="#{bean.pager.activePage}"/>
</h:link>


@ViewScoped
public class ProductBean  {

   @ManagedProperty(value="#{pager}")
   protected PagerBean pager;

   @Postconstruct
   public void init() {
      final String page = Faces.getRequestParameter("page");
      if (null != page){
         //load next entries          
      }
   }
}

我唯一的问题是，在这个版本中，ViewScoped ProductBean会在每个分页操作上重新创建。我认为，由于视图没有改变，因此不应该重新创建bean。什么是获得幸运的正确方法？

Answer 1

使用h：commandLink和 HTML5历史记录API 找到了非主要解决方案。

在每个分页操作上，当前页面编号存储在历史记录中。当用户导航时，页面编号将从历史记录中恢复并再次提交ajax。

<h:commandLink value="Next Page">
    <f:ajax listener="#{bean.nextPage}" render="dataTable" onevent="pushState"/>
</h:commandLink>

<h:inputText id="current" value="#{bean.pager.activePage}"/>

<h:commandLink value="Previous Page">
    <f:ajax listener="#{bean.prevPage}" render="dataTable" onevent="pushState"/>
</h:commandLink>

<!--hidden action fired when user navigates in history-->
<h:commandLink styleClass="hidden" id="hiddenLink">
    <f:ajax execute="current" listener="#{bean.jumpToPage}" render="dataTable" />
</h:commandLink>

JS：

$(window).on('popstate', function(event) {

    var pageInHistory = event.originalEvent.state;      
    if (null == pageInHistory){
        pageInHistory = 1;
    }
    //set page number from history
    $('#current').val(pageInHistory);
    //trigger ajax-submit
    $('#hiddenLink').trigger('click');

});

pushState = function (data){
  switch (data.status) {      
    case "success": {
       var currentPage = $('#current').val();
       history.pushState(currentPage, null, "?page=" + currentPage);    
    }
 }

豆

@ViewScoped
public class PagerBean  {

   private int activePage;

   public void jumpToPage() {
      //load data for activePage   
   } 

   //...
}

使用<h：link>和Url-Parameters进行数据表分页

1 个答案: