Question

我开发了我们的公司网站，我们在其中显示一个产品详细信息表示aspx页面中的一条记录。有时我们的html数据很大，用户必须多次滚动页面才能阅读整个内容。我知道如何获取＆amp;通过jquery ajax调用asp.net服务器端方法并使用parse json填充UI来显示页面中固定的记录数。问题是，在我的情况下，记录是我每页显示的记录和记录来自数据库。每条记录都是我正在展示的巨大的HTML数据。在这里，我给我们网站的一个示例网址，我们显示了巨大的HTML数据。 http://www.bba-reman.com/content.aspx?content=bba_reman_diagnostics_tools

我想知道一种好的技术，通过它我可以在我的页面中显示部分数据，当用户向下滚动时，下一组数据将被提取＆amp;所示。所以建议我如何从整个html中提取html的几个部分并在页面中显示，当用户向下滚动然后提取下一部分html并在页面中显示。所以简而言之，我需要知道如何在很少的部分划分一个巨大的HTML数据。请帮我概念。感谢

Answer 1

我的一个项目中有类似的情况，我使用JQuery .Scroll Event解决了它。以下是Scroll Event的official link。您所需要做的就是：

确定您希望一次向用户显示的HTML字符大小限制。假设它是X.如果您的总HTML字符数大于X，那么您只需要从DB返回X（或者从CS文件中的业务逻辑返回，以防您想避免使用多个数据库调用）
捕获用户的Scroll事件，并通过将文本附加到标签来获取+绑定下一组数据

Answer 2

如果您所说的是您提供的链接上的所有产品内容都存储在db中的一个字段中，您可以使用wrap（）等方法使每个产品像一行并基于用户交互显示某些行。

以下是在浏览器控制台中运行它在页面上测试的一些示例代码。它在顶部创建了一个非常简单的寻呼机，也可以在底部克隆。可以改进页面中的标记，通过添加一些更好的ID来更有效地利用jQuery，并且还可以进行一些不寻常的嵌套

$(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;
});

});

我创建了一个寻呼机只是作为一个例子，你也可以根据滚动显示更多的行。您应该可以将此代码直接放入页面中进行尝试

如何通过jquery ajax按需加载大量html数据

2 个答案: