Question

现在我正在显示从Mysql DB到前端的所有行，我正在使用React JS作为我项目的一部分。我很震惊

1）如何使用hibernate获取前10行，然后是10行，然后是10行，直到Mysql DB的最后一行？

2）如何在滚动10行后在UI中调用ajax调用。

我现在使用的React JS代码

<script type="text/babel">
         var CommentBox = React.createClass({
                                         loadCommentsFromServer: function(){
                                         $.ajax({
                                                url:this.props.url,
                                                dataType: 'json',
                                                cache: false,
                                                success:  function(data){
                                                this.setState({data: data});
                                                }.bind(this),
                                                error: function(xhr, status, err){
                                                console.error(this.props.url, status, err.toString());
                                                }.bind(this)

                                                });
                                         },

          getInitialState: function(){
              return {data: []};
          },
                                         componentDidMount: function(){
                                            this.loadCommentsFromServer();
                                            setInterval(this.loadCommentsFromServer, this.props.pollInterval);
                                         },
          render: function(){
              return (
                  <div className="commentBox">
                        <CommentList data={this.state.data}/>
                  </div>

              );
          }
      });

      var CommentList = React.createClass({
                                          render:function(){
                                                var commentNodes = this.props.data.map(function(comment) {
                                                                                       return(
                                                                                              <Comment >
                                                                                                {comment}
                                                                                              </Comment>

                                                                                              );
                                                });
                                                return(
                                                    <div className="commentList">
                                                       {commentNodes}
                                                    </div>
                                                );
                                          }
      });

      var Comment = React.createClass({
                                     rawMarkup: function() {
                                        var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
                                        return { __html: rawMarkup };
                                      },
                                      render: function(){
                                            return (
                                                <div className="comment">
                                                    <span dangerouslySetInnerHTML={this.rawMarkup()} />
                                                </div>
                                            )
                                      }
      });


      ReactDOM.render(
                      <CommentBox url="/url/abc" pollInterval={10000}/>,
            document.getElementById('content')
      );

    </script>

我遇到了以下一段代码w.r.t Infinite scroll，但不知道如何将它与React JS一起使用

 $(document).ready(function(){
                $contentLoadTriggered = false;
                $("#content-box").scroll(function(){
                    if($("#content-box").scrollTop() >= ($("#content-wrapper").height() - $("#content-box").height()) && $contentLoadTriggered == false)
                    {
                        $contentLoadTriggered = true;
                        $.get("infinitContentServlet", function(data){
                            $("#content-wrapper").append(data);
                            $contentLoadTriggered = false;
                        });
                    }

                });
            });

3）现在我也在Hibernate中使用.setFetchSize(10)。不确定它是否会添加下一个10，然后是10，因为我无法测试该场景，因为我的UI还没有准备好。我很震惊和无助。请帮我。感谢。

Answer 1

您不需要使用setFetchSize(10)进行分页。它是出于优化目的。对于Hibernate的分页，您可以使用这个简单的类（pageSize = 10作为示例）

public class Pagination {

    public static final Pagination EMPTY = new Pagination(0, 0);

    /** Page index, begins from 0. */
    private final int pageIndex;

    /** Objects on page count. */
    private final int pageSize;

    public Pagination(int pageIndex, int pageSize) {
        this.pageIndex = pageIndex;
        this.pageSize = pageSize;
    }

    public void addToCriteria(final Criteria criteria) {
        if (this == EMPTY) {
            return;
        }
        criteria.setMaxResults(pageSize);
        criteria.setFirstResult(pageIndex * pageSize);
    }

}

与Criteria一起使用的example。

如何在UI中与React JS一起进行无限滚动？

1 个答案: