jQuery Infinite Scroll y Gridview

Question

supongamos que tengo 10.000 registros en la base de datos pero quiero mostrar 100 registros en la página a través de gridview y quiero que cuando el usuario se desplace hacia abajo y alcance el último registro en la página, se cargue el resto del registro 100 en la vista de cuadrícula a través de jquery. de esta forma, los datos se cargarán cuando el usuario se desplace hacia abajo. así que tengo alguna pregunta en mi mente como.

1) cómo detectar ese alcance del usuario en el último registro cuando estoy mostrando 100 registros cuando la página se carga.

2) si pudiera detectar, entonces puedo iniciar JQuery ajax call para buscar el próximo 100 registro y agregar los nuevos 100 registros nuevamente en la vista inferior de la grilla. Entonces, ¿cómo puedo asignar datos o anexar datos a gridview por jquery?

por favor discutir en detalle ... código de muestra será más útil. gracias

Answer 1

he hecho de esta manera con MVC y jQuery 2:

controlador:

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

Vista:

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

Guión:

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

vistazo aquí: jQuery: detecting reaching bottom of scroll doesn't work, only detects the top

Answer 3

que supongo que tiene los fundamentos de jQuery y entonces esto es lo que podría hacer ...

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

Se puede usar jQuery para detectar hasta qué punto el usuario ha desplazado, y compare eso con la parte inferior del div que contiene sus 100 registros. A continuación, busque las siguientes 100 filas de la base de datos.

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

Como alternativa, puede precargar los 10.000 registros y utilizar jQuery para dividirlos en grupos de 100 filas. Esto permitiría al usuario ver instantáneamente los siguientes 100 artículos sin tener que esperar a que vuelvan los datos.