jQuery Infinite Scroll and Gridview

Question

suppose i have 10,000 records in database but i want to show 100 record in the page through gridview and i want when user scroll down and reach the last record in the page then rest of the 100 record will load in the gridview through jquery. in this way data will load when user scroll down. so i have some question in my mind like.

1) how to detect that user reach at the last record when i am showing 100 record when page loads.

2) if i could detect then i can initiate JQuery ajax call to fetch next 100 record and append the new 100 records again at the bottom gridview. so how i can assign data or append data into gridview by jquery.

please discuss in detail...sample code will be more helpful. thanks

rick schott · Accepted Answer · 2011-04-12T14:53:51.847

I have done it this way with MVC 2 and jQuery:

Controller:

/// <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);
    }
}

View:

 <% 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>
    <% } %>

Script:

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

    }
}

score 1 · Answer 2 · edited May 23 '17 at 10:33

1

look here : jQuery: detecting reaching bottom of scroll doesn't work, only detects the top

edited May 23 '17 at 10:33

Community

1
1

answered Feb 25 '11 at 13:48

alexl

6,841
3
24
29

score 1 · Answer 3 · answered Feb 25 '11 at 13:48

I am guessing you have the basics of jquery and then this is what you could do ...

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

score 1 · Answer 4 · edited May 23 '17 at 10:24

You could use jQuery to detect how far the user has scrolled, and compare that to the bottom of the div containing your 100 records. Then fetch the next 100 rows from the DB.

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

Alternatively, you could prefetch all 10,000 records and use jQuery to divide them into groups of 100 rows. This would allow the user to instantly see the next 100 items without have to wait for the data to return.

jQuery Infinite Scroll and Gridview

4 Answers4