3

我尝试在 html 表上实现无限滚动，或者如果需要，可以实现“滚动加载”。数据存储在数据库中，我使用后面的代码访问它。

我从 msdn 上的一个示例中实现了它，如下所示：

JS

 $(document).ready(function () { 

        function lastRowFunc() { 
            $('#divDataLoader').html('<img src="images/ajax-Loader.gif">'); 

            //send a query to server side to present new content 
            $.ajax({ 
                type: "POST", 
                url: "updates.aspx/GetRows", 
                data: "{}", 
                contentType: "application/json; charset=utf-8", 
                dataType: "json", 
                success: function (data) { 

                    if (data != "") { 
                        $('.divLoadedData:last').before(data.d);
                    } 
                    $('#divDataLoader').empty(); 
                } 

            }) 
        }; 

        //When scroll down, the scroller is at the bottom with the function below and fire the lastRowFunc function 
        $(window).scroll(function () { 
            if ($(window).scrollTop() == $(document).height() - $(window).height()) { 
                lastRowFunc(); 
            } 
        });

        // Call to fill the first items
        lastRowFunc();
    });

后面的代码并不那么有趣，它只是以这种格式（每行一个）从数据库返回数据（每次 20 行）：

<tr><td>Cell 1 data</td><td>Cell 2 data</td><td>Cell 3 data</td></tr>

ASPX

<table>
<thead>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
</thead>
    <tbody>
        <div class="divLoadedData"> 
        </div>
    </tbody>
</table>
<div id="divDataLoader"> 
</div>

问题是，当数据被加载并插入页面时（即使在第一次加载时），表头会在数据之后。我确实看到了我加载的所有行，但表格标题位于页面底部（在我加载的 20 行之后）。我尝试了一些变化来插入加载的数据：

$('.divLoadedData:last').before(data.d);

或者

$('.divLoadedData:last').append(data.d);

或者

$('.divLoadedData:last').after(data.d);

但他们都没有工作。很高兴听到有关如何使用 html 表正确实现它并使其工作的任何建议。

4

2 回答 2

2

这可能是因为 HTML 无效：tbody应该只包含tr. 为什么不直接将行附加到tr，像这样？

HTML

<table>
 <thead>
  <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
 </thead>
 <tbody class="tbodyLoadedData">
 </tbody>
</table>
<div id="divDataLoader"> 
</div>

JS

$('.tbodyLoadedData').append(data.d);

此 JSBin 将这种方式与您当前尝试的方式进行比较。在 Chrome 的 DOM 检查器中查看您的方式，Chrome 似乎正在div将table.

我在 JSBin 中的表格中添加了一个边框，以表明它div正在移出它。

于 2013-01-31T19:23:30.313 回答
0

IMO ，div内部table并不真正需要。试试这是否可行：

ASPX：

<table>
  <thead>
    <tr><th>Header 1</th><th>Header 2</th><th>Header 3</th></tr>
  </thead>
  <tbody class="divLoadedData">
  </tbody>
</table>
<div id="divDataLoader"> 
</div>

成功回调：

function (data) { 
    if (data != "") { 
        $('.divLoadedData').append(data.d);
    } 
    $('#divDataLoader').empty();
}
于 2013-01-31T19:24:06.060 回答