無限滾動與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滾動到底部後第一次更新

回答

相關問題