0

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

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

4

2 回答 2

1

我在我的一个项目中遇到了类似的情况，我通过使用 JQuery .Scroll Event 解决了它。这是滚动事件的官方链接。您需要做的就是：

  1. 确定一次要向用户显示的 HTML 字符大小的限制。说它是 X。如果您的总 HTML 字符数超过 X，那么您只需从 DB 中返回 X（或从 CS 文件中的业务逻辑返回，以防您想避免使用多个 DB 调用）

  2. 捕获用户的滚动事件并通过将文本附加到标签来获取+绑定下一组数据

于 2012-06-15T19:12:11.283 回答
0

如果您所说的是您提供的链接上的所有产品内容都存储在 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;
});

});

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

于 2012-06-15T20:25:28.643 回答