使用jquery在mvc 4中光标到达页面结束时加载页面？

Question

在我看来，我正在填充从一个有超过1000条记录的表中获取的内容。我必须以这样的方式填充内容：只有在向下滚动而不是一次滚动时，记录才会填充到更少的记录中。我用它来开发移动应用程序。我已尝试在线使用各种来源但在滚动范围内无效。如果你仍然不清楚我的问题，大多数人可能已经使用过facebook。那里的帖子没有一次全部加载。只有在滚动时才会加载它们。我必须实现相同的功能。任何对实时代码的引用都将受到赞赏。提前谢谢。

这是我获取记录的代码

@foreach (System.Data.DataRow row in Model.dtSearch.Rows)
{
if (Model.dtSearch.Rows.Count > 0)
    {
    <input type ="hidden" value="@row["ProductId"]" />
    <input type ="hidden" value="@row["ProductPriceId"]" />

    <div class="divSearchResult" id="divSearch">
    <table>
    <tbody>
    <tr><td rowspan="2" style="width:10%"> @Html.Raw(row["ThumbnailFilename"])</td>
    <td colspan="3"><div class="divSearchHeader"> @row["ProductName"] <br /></div></td></tr>
    <tr><td colspan="4"><div class="divSearchShowHide" ><a class="classShow" id="show" href="#" style="text-decoration:none">Show</a></div>
    <div style="display:none;" class="divSearchContent" id=divresult_@ProductDescription > @Html.Raw(row["ProductDescription"])</div></td></tr>
    </tbody>
    </table>
    <hr />
</div>

    }}

显示代码没有意义，但这是我必须实现功能的地方

Answer 1

您可以使用jQuery Waypoints Infinite Scroll插件

$('.infinite-container').waypoint('infinite', {
  container: 'auto',
  items: '.infinite-item',
  more: '.infinite-more-link',
  offset: 'bottom-in-view',
  loadingClass: 'infinite-loading',
  onBeforePageLoad: $.noop,
  onAfterPageLoad: $.noop
});