페이지를 스크롤하면서 데이터를로드하십시오.

데이터베이스에서 읽은 값 목록을 표시하고 Struts 표시 태그로 사용자에게 표시되도록하려면 값 목록이 동시에로드되어야합니다. 사용자가 페이지 아래로 스크롤합니다.페이지를 스크롤하면서 데이터를로드하십시오.

내 문제는 이미 단지 몇 가지 데이터를로드하는 작업이 있기 때문에 지금은 $.ajax() jQuery의 기능을 사용하여로드를 수행 할 생각이었습니다. 그런 경우 시도하기 전에 다른 Struts 태그 등을 사용하여 그렇게하는 옵션. (나는 정렬이 필요하기 때문에 표시 태그를 사용하고 있습니다.)

출처

2012-10-15 Luis

jQuery Ajax를 사용하면 스크롤에 데이터를로드하는 것이 그리 복잡하지 않습니다. 아래는 scroll 이벤트를 보여주기 위해 사용되는 코드입니다. $.ajax()을 호출하여 Struts 액션에서 데이터를로드하고 스크롤바 엄지의 끝에 추가 컨텐츠를 반환합니다. 기사 작성자의 크레딧 Load Data From Server While Scrolling Using jQuery AJAX.

LoadDataAction.java :

@Action(value="load-on-scroll-example", results = { 
    @Result(location = "/LoadData.jsp") 
}) 
public class LoadDataAction extends ActionSupport { 
    private static int COUNT = 6; 

    private InputStream inputStream; 

    //getter here 
    public InputStream getInputStream() { 
    return inputStream; 
    } 

    @Action(value="load-data", results = { 
    @Result(type="stream", params = {"contentType", "text/html"}) 
    }) 
    public String loadData() throws Exception { 
    String resp = ""; 
    Map<String, Object> session = ActionContext.getContext().getSession(); 
    int counter = session.get("counter")== null?COUNT:(int)session.get("counter"); 
    for(int i = 0; i <= 10; i++) { 
     resp += "<p><span>" + counter++ + 
     "</span> This content is dynamically appended " + 
     "to the existing content on scrolling.</p>" ; 
    } 
    session.put("counter", counter); 
    inputStream = new ByteArrayInputStream(resp.getBytes()); 
    return SUCCESS; 
    } 
}

LoadData.jsp :

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ taglib prefix="s" uri="/struts-tags"%> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>Demo page: Load data while scrolling using Struts2 and JQuery</title> 


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $contentLoadTriggered = false; 
    $("#mainDiv").scroll(function() { 
     if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false) { 
     $contentLoadTriggered = true; 
     $.ajax({ 
      url: "<s:url action='load-data'/>", 
      success: function (data) { 
      $("#wrapperDiv").append(data); 
      $contentLoadTriggered = false; 
      }, 
      error: function (x, e) { 
      alert("The call to the server side failed. Error: " + e); 
      } 
     }); 
     } 
    }); 
    }); 

</script> 

<style type="text/css"> 
    body { 
    font-family:Arial; 
    font-size:.93em; 
    } 

    #mainDiv { 
    background-color:#FAFAFA; 
    border:2px solid #888; 
    height:200px; 
    overflow:scroll; 
    padding:4px; 
    width:700px; 
    } 

    #mainDiv p { 
    border:1px solid #EEE; 
    background-color:#F0F0F0; 
    padding:3px; 
    } 

    #mainDiv p span { 
    color:#00F; 
    display:block; 
    font:bold 21px Arial; 
    float:left; 
    margin-right:10px; 
    } 
</style> 

</head> 
<body> 
<form id="form1"> 
    <div> 
    <h1> 
     Demo page: Load data while scrolling with Struts2 and JQuery</h1> 
    <p></p> 
    <p style="margin: 20px 0; background-color: #EFEFEF; border: 1px solid #EEE; padding: 3px;"> 
     This page is a demo for loading new content from the server and append the data 
      to existing content of the page while scrolling. 
    </p> 
    </div> 
    <div id="mainDiv"> 
    <div id="wrapperDiv"> 
     <p> 
     <span>1</span> Static data initially rendered. 
     </p> 
     <p> 
     <span>2</span> Static data initially rendered. 
     </p> 
     <p> 
     <span>3</span> Static data initially rendered. 
     </p> 
     <p> 
     <span>4</span> Static data initially rendered. 
     </p> 
     <p> 
     <span>5</span> Static data initially rendered. 
     </p> 
    </div> 
    </div> 
</form> 
</body> 
</html>

출처

2014-06-28 13:03:02

페이지를 스크롤하면서 데이터를로드하십시오.

답변

관련 문제