jQuery Infinite Scroll和Gridview

Question

假設我在數據庫中有10,000條記錄，但我想通過gridview在頁面中顯示100條記錄，我希望當用戶向下滾動並到達頁面中的最后一條記錄時，100條記錄的其余部分將通過jquery加載到gridview中。 這樣，當用戶向下滾動時，數據將加載。 所以我在腦海里有一些問題。

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

2）如果我能檢測到那么我可以啟動JQuery ajax調用來獲取下一個100記錄並在底部gridview再次追加新的100條記錄。 所以我如何通過jquery分配數據或將數據附加到gridview中。

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

Answer 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>");
                        }                     
                    }
                });
            }
        }

    }
}

Answer 2

看這里： jQuery：檢測到滾動底部不起作用，只檢測頂部

Answer 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,
}

Answer 4

您可以使用jQuery來檢測用戶滾動的距離，並將其與包含100條記錄的div的底部進行比較。 然后從DB中獲取接下來的100行。

如何使用jQuery測量用戶滾動的距離？

或者，您可以預取所有10,000條記錄並使用jQuery將它們分成100行的組。 這將允許用戶立即查看接下來的100個項目，而無需等待數據返回。