Прокрутите вниз и загрузите больше данных в пользовательский интерфейс: повторите - PullRequest
Новая
       19

Прокрутите вниз и загрузите больше данных в пользовательский интерфейс: повторите

0 голосов
/ 03 января 2019

Создаю приложение, используя jsf 2.3 и primefaces 6.2, когда прокручиваю вниз, я хочу загрузить больше данных и добавить их к старому.Ниже приведен мой код.

Мой код JSF 

<h:commandScript name="loadMoreTimeline" execute="@this" render=":postForm:panelBlock" action="#{timelineBean.loadMoreTimeline()}" />     

<h:panelGroup id="panelBlock" styleClass="panelBlock" layout="block">
   <ui:repeat id="timelineRepeater" value="#{timelineBean.timelineList}" var="timeline">
     <div data-id="#{timeline.postId}">
       <h:outputText escape="false" value="#{timeline.content}" />
     </div>
   </ui:repeat>
</h:panelGroup>

@Named
@ViewScoped
public class TimelineBean implements Serializable {
  private List<Timeline> timelineList;

  @PostConstruct
  public void init() {
     //loaded initially and contains the first N records.
     timelineList = feedService.getTimelines();

  }

  // SQL - SELECT * FROM timeline WHERE post_id < 'post_id' ORDER BY post_id DESC LIMIT 10
  public void loadMoreTimeline() {
    String lastId = FacesContext.getCurrentInstance().getExternalContext().getRequestParameterMap().get("lastId");
    long postId = Long.valueOf(lastId);
    timelineList.addAll(feedService.getTimelines(postId));
  }

  public List<Timeline> getTimelineList() {
    return timelineList;
  }


}

Код Jquery 

$(window).scroll(function() {
  if ($(window).scrollTop() === $(document).height() - $(window).height()) { 
    //get the last div postid
    var lastId = $('.post-item:last').attr('data-id');
    // calling my commandScript
    loadMoreTimeline({lastId: lastId"});
  }
});

Приведенный выше код работает очень хорошо, но он отображает вседерево компонентов внутри панели.Я хочу ситуации, когда он будет отображать только подмножество дерева компонентов на основе конкретного параметра запроса.

Итак, я наткнулся на компонент Omnifaces, который отображает только один или несколько компонентов в представлении через параметр GET. Как частично перезагрузить пользовательский интерфейс: repeat? Моя проблема в том, как это будет работать с моим кодом.Поскольку postConstruct изначально загрузит первые N записей, как я буду вызывать метод loadMoreTimeline (). 

<h:outputScript>
        $("#showMore").click(function() {
            $items = $("#items");
            var params = { start: $items.find("li").length, componentId: "itemsRepeater" };
            //jQuery's $.get() reload the <ui:repeat>
            $.get(location, params, function(html) {
                $items.append(html);
            });
        });
</h:outputScript>
...