jQuery无限滚动和Gridview

问题描述：

假设我在数据库中有10,000条记录，但我想通过gridview在页面中显示100条记录，我希望当用户向下滚动并到达页面中的最后一条记录时，100条记录的其余部分将加载在通过jQuery的GridView中。通过这种方式，用户向下滚动时会加载数据。所以我在脑海里有一些疑问。jQuery无限滚动和Gridview

1）当页面加载时显示100条记录时，如何检测到用户到达最后一条记录。

2）如果我能检测到，那么我可以启动JQuery ajax调用来获取下一个100条记录，并在底部gridview中再次追加新的100条记录。所以我怎么可以分配数据或追加数据到jQuery的gridview。

请详细讨论...示例代码会更有帮助。感谢

答

我已经这样做了它与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>"); 
         }      
        } 
       }); 
      } 
     } 

    } 
}

答

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

答

我猜你的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, 
}

答

你可以使用jQuery来检测用户有多远已滚动，并将其与包含100条记录的div底部进行比较。然后从数据库中获取下100行。

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

或者，你可以预取全部10000条记录，并使用jQuery把它们分为100个行。这将允许用户立即看到接下来的100个项目，而不必等待数据返回。

jQuery无限滚动和Gridview

相关推荐