jQuery 无限滚动和 Gridview答案

【问题标题】：jQuery Infinite Scroll and GridviewjQuery 无限滚动和 Gridview
【发布时间】：2011-02-25 13:44:13
【问题描述】：

假设我在数据库中有 10,000 条记录，但我想通过 gridview 在页面中显示 100 条记录，并且我希望当用户向下滚动并到达页面中的最后一条记录时，其余 100 条记录将通过 jquery 加载到 gridview 中.这样，当用户向下滚动时，数据将加载。所以我有一些疑问。

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

2) 如果我可以检测到，那么我可以启动 JQuery ajax 调用以获取下一个 100 条记录并在底部网格视图中再次附加新的 100 条记录。那么我如何通过 jquery 分配数据或将数据附加到 gridview 中。

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

【问题讨论】：

标签： c# javascript jquery asp.net asp.net-mvc

【解决方案1】：

我已经用 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>");
                        }                     
                    }
                });
            }
        }

    }
}

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

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

或者，您可以预取所有 10,000 条记录并使用 jQuery 将它们分成 100 行一组。这将允许用户立即查看接下来的 100 个项目，而无需等待数据返回。

【讨论】：