如何根據需要加載大量的html數據jquery ajax

我已經開發了我們的公司網站，我們顯示一個產品的細節意味着一個記錄在aspx頁面。有時候我們的html數據非常龐大，用戶必須多次滾動頁面來閱讀整個內容。我知道如何獲取&通過jquery ajax調用asp.net服務器端方法併爲填充UI分析json來在頁面中顯示固定數量的記錄。問題是在我的情況下，記錄是我每頁顯示的記錄，記錄來自db。每個記錄都是我正在展示的一個巨大的html數據。在這裏我給我們的網站，我們顯示巨大的HTML數據的示例網址。 http://www.bba-reman.com/content.aspx?content=bba_reman_diagnostics_tools 如何根據需要加載大量的html數據jquery ajax

我想知道很好的技術，通過它我可以在我的頁面中顯示部分數據，當用戶向下滾動時，下一組數據將顯示爲&。所以建議我如何從整個html中提取html的一部分，並在頁面中顯示，當用戶向下滾動然後提取下一部分html並在頁面中顯示時。所以總之我需要知道我怎麼能在很少的部分分割一個巨大的HTML數據。請幫助我的概念。謝謝

來源

2012-06-15 Thomas

讓您的方法只返回部分數據。爲用戶提供一個「顯示更多」選項，點擊後，你會問你的方法的全部細節。 – Jeremy

它可能不是您想要聽到的內容，但如果您的數據庫結構是限制因素，則可能希望重新構造數據庫，以便代碼可以正確地與數據配合使用。 –

綁定下一組數據。如果你說的是你提供的是存儲在一個鏈接上的產品內容在db中你可以使用像wrap（）這樣的方法使每個產品像行一樣，並且基於用戶交互顯示特定的行。

下面是一些通過在瀏覽器控制檯中運行測試的示例代碼。它在頂部創建一個非常簡單的尋呼機，也可以在底部進行克隆。在頁面的標記可以被改進，以使使用jQuery的更有效的增加了一些更好的ID並有一些不尋常的嵌套事情也

$(function(){ 
/* wrap each pair of picture and description in a div*/ 
$('.diagnostic_picture').each(function(){ 
    $(this).next('.diagnostic_information').andSelf().wrapAll('<div class="product_row" style="clear:both">'); 
}); 
/* cache rows to variable */ 
var $products=$('.product_row'); 
var total_products=$products.length; 
/* hide all but first 5 "rows" */ 
$products.slice(5).hide(); 
/* create a pager based on qty of products and 5 per page */ 
var pager='<ul class="pager" style="height:1.5em; margin: 10px 0;">'; 
var pager_length=Math.round(total_products/5); 

for(i=0; i< pager_length; i++){ 
    pager+='<li style="float:left"><a href="#" style="padding:5px;color:blue; background: #CCC; margin-right:5px; display:block" data-pager_start="'+(i*5)+'">'+(i+1)+'</a></li>'; 
} 
pager+='</ul>'; 
/* insert pager before first "row" */ 
$products.eq(0).before(pager); 
/* pager click handler */ 
$('.pager a').click(function(){ 
    var start=$(this).data('pager_start'); 
    $products.hide().slice(start, (start+5)).show(); 
    return false; 
}); 

});

我創建了一個尋呼機只是作爲一個例子，你也可以顯示更多的行基於滾動以及。您應該可以直接將此代碼放入您的頁面以嘗試它

來源

2012-06-15 20:25:28 charlietfl

我在我的項目中有一個類似的情況，我通過使用JQuery.Scroll事件來解決它。這裏是滾動事件official link。您只需要：

確定您希望向用戶顯示的HTML字符大小的限制。假設它是X.如果您的總HTML字符數超過X，那麼您只需從DB返回X（如果您想避免使用多個數據庫調用，則需要從業務邏輯或OR中返回）
Capture用戶的Scroll事件並獲取+由文本附加到標籤

來源

2012-06-15 19:12:11 DotNetFreak

你說我找到一個url的方式.... http：//forums.asp.net/t/1703466.aspx/1？面對+問題+ + +單+大+記+和+無限+滾動只是看看，告訴我這個樣品是好的？或需要進一步改進。 – Thomas

如何根據需要加載大量的html數據jquery ajax

回答

相關問題