Question

我尝试在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表正确实现它的任何建议并使其工作。

Answer 1

可能是因为HTML无效：tbody is only supposed to contain 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);

This JSBin compares this way and the way you are currently trying。在Chrome的DOM检查器中查看您的方式，Chrome似乎正在将div移至table之前。

我在JSBin中为表添加了一个边框，以显示div已移到它之外。

Answer 2

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

带有html表标签的无限滚动（滚动加载）

2 个答案: