jQuery Бесконечный свиток и Gridview

18

Предположим, у меня есть 10 000 записей в базе данных, но я хочу показать 100 записей на странице через gridview, и я хочу, когда пользователь прокрутит вниз и достигнет последней записи на странице, тогда остальная часть 100 будет загружаться в gridview через jquery , таким образом, данные будут загружаться при прокрутке пользователя вниз. поэтому у меня есть какой-то вопрос в моем сознании.

1), как обнаружить, что пользователь достигает последней записи, когда я показываю 100 записей при загрузке страницы.

2), если бы я мог обнаружить, тогда я могу инициировать вызов jQuery ajax для извлечения следующей 100 записей и добавить новые 100 записей снова в нижнем gridview. так как я могу назначить данные или добавить данные в gridview с помощью jquery.

, пожалуйста, обсудите подробнее ... пример кода будет более полезным. спасибо

    
задан Thomas 25.02.2011 в 14:44
источник

4 ответа

13

Я сделал это с 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>");
                        }                     
                    }
                });
            }
        }

    }
}
    
ответ дан rick schott 25.02.2011 в 14:52
1

Я предполагаю, что у вас есть основы 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,
}
    
ответ дан Val 25.02.2011 в 14:48
1

Вы можете использовать jQuery для определения того, как далеко прокручивается пользователь, и сравнить его с нижней частью div, содержащей ваши 100 записей. Затем выберем следующие 100 строк из базы данных.

Как вы можете использовать jQuery для измерения того, как далеко прокручивается пользователь?

В качестве альтернативы вы можете предварительно выбрать все 10 000 записей и использовать jQuery для разделения их на группы из 100 строк. Это позволит пользователю мгновенно увидеть следующие 100 элементов, не дожидаясь возвращения данных.

    
ответ дан FreeAsInBeer 25.02.2011 в 14:51