jQuery無限滾動和Gridview

假設我在數據庫中有10,000條記錄，但我想通過gridview在頁面中顯示100條記錄，我希望當用戶向下滾動併到達頁面中的最後一條記錄時，100條記錄的其餘部分將加載在通過jQuery的GridView中。通過這種方式，用戶向下滾動時會加載數據。所以我在腦海裏有一些疑問。jQuery無限滾動和Gridview

1）當頁面加載時顯示100條記錄時，如何檢測到用戶到達最後一條記錄。

2）如果我能檢測到，那麼我可以啓動JQuery ajax調用來獲取下一個100條記錄，並在底部gridview中再次追加新的100條記錄。所以我怎麼可以分配數據或追加數據到jQuery的gridview。

請詳細討論...示例代碼會更有幫助。感謝

來源

2011-02-25 Thomas

我已經這樣做了它與MVC 2和jQuery：

控制器：

/// <summary> 
/// GET: /Widget/Search/ 
/// Displays search results. 
/// </summary> 
/// <param name="s"></param> 
/// <returns></returns> 
public ActionResult Search(SearchType searchType, string s, [DefaultValue(1)]int page) 
{ 
    try 
    { 
     int batch = 20; 
     int fromRecord = 1; 
     int toRecord = batch; 

     if(page != 1) 
     { 
      toRecord = (batch * page); 
      fromRecord = (toRecord - (batch-1)); 

     } 

     var widgets= _repos.Search(searchType, s, fromRecord, toRecord); 

     if (widgets.Count == 0) 
     { 
      InfoMsg("No widgets were found."); 
     } 

     if (Request.IsAjaxRequest()) 
     {   
      if(widgets.Count > 0) 
      { 
       return View("SearchResultsLineItems", widgets); 
      } 
      else 
      { 
       return new ContentResult 
       { 
        ContentType = "text/html", 
        Content = "noresults", 
        ContentEncoding = System.Text.Encoding.UTF8 
       }; 
      } 

     } 

     return View("SearchResults", widgets); 
    } 
    catch (Exception ex) 
    { 
     return HandleError(ex); 
    } 
}

查看：

<% if (Model.Count > 0) { %> 
    <table id="tblSearchResults"> 
     <tr> 
      <th></th> 
      <th>Col1</th> 
      <th>Col2</th> 
      <th>Col3</th> 
      <th>Col4</th> 
      <th>Col5</th> 
      <th>Col6</th> 
     </tr> 
     <% Html.RenderPartial("SearchResultsLineItems", Model); %>  
    </table> 
    <div id="loadingSearchResults" style="text-align:center;height:24px;"></div>  
    <div id="actionModal" class="modal"></div> 
    <% } %>

腳本：

function initAutoPaging() { 
    $(window).scroll(function() { 
     if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
      loadMore() 
     } 
    }); 
} 


var current = 1; 
function loadMore() { 
    if (current > -1) { 
     if (!_isShowingDetails) 
     { 
      if (!$('#loadingSearchResults').html()) { 
       current++; 
       $('#loadingSearchResults').show(); 
       $('#loadingSearchResults').html("<img src='/content/images/loading.gif' />"); 
       $.ajax({ 
        async: true, 
        url: document.URL + "?&page=" + current, 
        contentType: "application/x-www-form-urlencoded", 
        dataType: "text", 
        success: function(data) { 
        if (data != 'noresults') {       
          $('#tblSearchResults tr:last').after(data); 
          $('#loadingSearchResults').hide(); 
          $('#loadingSearchResults').html(''); 
          highlightSearch(); 
         } else { 
          current = -1; 
          $('#loadingSearchResults').show(); 
          $('#loadingSearchResults').html("<h3><i>-- No more results -- </i></h3>"); 
         }      
        } 
       }); 
      } 
     } 

    } 
}

來源

2011-02-25 13:52:23

看這裏：jQuery: detecting reaching bottom of scroll doesn't work, only detects the top

來源

2011-02-25 13:48:21 alexl

我猜你的jQuery的基礎知識，那麼這就是你能做什麼？

var h = $('body,html').height();// gives u the height of the document . 

var s = $('body,html').scrollTop(); // gives you the length the document has been scrolled, 

//so 

if(s> (h-40)){//40 px tolerance 
//do ajax here to load the it on the fly, then dump them at the bottom, 
}

來源

2011-02-25 13:48:54 Val

你可以使用jQuery來檢測用戶有多遠已滾動，並將其與包含100條記錄的div底部進行比較。然後從數據庫中獲取下100行。

How can you use jQuery measure how far down the user has scrolled?

或者，你可以預取全部10000條記錄，並使用jQuery把它們分爲100個行。這將允許用戶立即看到接下來的100個項目，而不必等待數據返回。

來源

2011-02-25 13:51:42 FreeAsInBeer

jQuery無限滾動和Gridview

回答

相關問題