无限滚动与asp.net gridview没有检测div滚动到底部后第一次更新

我想实现无限滚动的GridView来加快我的Web应用程序，因为GridView被绑定到一个SQL查询返回数千（这是客户的愿望，我不能改变这一点）。无限滚动与asp.net gridview没有检测div滚动到底部后第一次更新

所以我一直在按照指示添加无限滚动到gridview发现here，它确实工作 - 第一次用户滚动到div的底部。第二次，什么都没有。

这里是我用来跟踪div的滚动事件的代码。最初的代码是为Jquery 1.8.3编写的;我已经改变了它的JQuery 1.11。我还添加了后续的方法，以便在事情发生时看到会发生什么。

$("#dvGrid").scroll(function (e) { 
    var $o = $(e.currentTarget); 
    //if ($o[0].scrollHeight - $o.scrollTop() <= $o.outerHeight()) { 
    // GetRecords(); 
    //} 
    if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { 
     GetRecords(); 
     console.log('end reached'); 
    } 
}); 

//Function to make AJAX call to the Web Method 
     function GetRecords() { 
      pageIndex++; 
      if (pageIndex == 2 || pageIndex <= pageCount) { 

      //Show Loader 
      if ($("#resultGrid .loader").length == 0) { 
       var row = $("#resultGrid tr").eq(0).clone(true); 
       row.addClass("loader"); 
       row.children().remove(); 
       row.append('<td colspan = "999" style = "background-color:white"><img id="loader" alt="" /></td>'); 
       $("#resultGrid").append(row); 
      } 
      $.ajax({ 
       type: "POST", 
       url: "testPage.aspx/GetCustomers", 
       data: '{pageIndex: ' + pageIndex + '}', 
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: OnSuccess, 
       failure: function (response) { 
        alert(response.d); 
       }, 
       error: function (response) { 
        alert(response.d); 
       } 
      }); 
     } 
    } 

    //Function to recieve XML response append rows to GridView 
    function OnSuccess(response) { 
     var xmlDoc = $.parseXML(response.d); 
     var xml = $(xmlDoc); 
     pageCount = parseInt(xml.find("PageCount").eq(0).find("PageCount").text()); 
     var mills = xml.find("DBTableName"); 
     $("#resultGrid .loader").remove(); 
     mills.each(function() { 
      var mill = $(this); 
      var row = $("#resultGrid tr").eq(0).clone(true); 
      $(".class", row).html(mill.find("data_item").text()); 

      // rinse, lather and repeat for each data item ... 

      $("#resultGrid").append(row); 
     }); 

     //Hide Loader 
     $(".loader").hide(); 
    }

GetRecords是引发我的ajax更新的方法，就像我说的，它第一次工作。广泛的断点告诉我，在第一次更新之后，我不再能够检测用户何时滚动到div的底部。

div的高度并没有改变，但gridview的高度是这样的：10行被更新添加到它的末尾，从10到20的行数。注释条件的滚动（）方法是原始代码检查到达div底部的方式;第二个条件是检查我从this SO post得到的方法，但我仍然遇到同样的问题，即使第二个条件中的数学每次都计算为真。有谁知道发生了什么问题？

来源

2015-02-24 bmurrell30

我想通了。在我的条件来检查到达div的底部：

if ($(this).scrollTop() + $(this).innerHeight() >= this.scrollHeight) { 
    GetRecords(); 
    console.log('end reached'); 
}

“$（本）.scrollTop（）”被返回小数结果，这意味着第一次更新后，在有条件的声明实际上是加起来，这是一个像素害羞总滚动高度的十分之一的量 - 的1109.9代替1110

所以我改变了的条件是这样的：

if (Math.ceil($(this).scrollTop()) + $(this).innerHeight() >= this.scrollHeight) { 
    GetRecords(); 
}

现在算算正常工作，和你每次更新触发器。 Egad，我喜欢学习过程：P

来源

2015-02-24 16:44:32 bmurrell30

无限滚动与asp.net gridview没有检测div滚动到底部后第一次更新

回答

相关问题