javascript - 在部分 View 中向我的表格添加无限滚动

Question

我的部分 View 中有一个表格，

<table id="tblClaimSearch" class="display responsive nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th><input type="checkbox" id="ChkboxClaimHeader" name="ChkboxClaimHeader" value="false"/></th>
            <th>Claim #</th>
            <th>Client Name</th>
            <th>Amount</th>
            <th>Deduction</th>
            <th>Type</th>
            <th>Status</th>                       
        </tr>
    </thead>

    <tbody>
    @if (Model.Claims != null)
    {
        foreach (var item in Model.Claims)
        {
            <tr>
                <td><input type="checkbox" class="chkbox-claim"/></td>
                <td>@item.ClaimNumber</td>
                <td>@item.Client</td>
                <td>@item.Amount</td>
                <td>@item.Deduction</td>
                <td>@item.Type</td>
                <td>@item.Status</td>
            </tr>                                   
        }
    }
    </tbody>
</table>

我希望向该表添加无限滚动，目前我有数字分页，这是我从 Bootstrap 默认获得的。

Answer 1

如果您在每次滚动时都进行计算，那么您最好希望对滚动进行去抖动以提高性能，因为事件每秒都会触发很多次(正如您在控制台日志中看到的那样)。您还需要将选择器缓存到事件处理程序(即 $(window).scroll)范围之外的变量中。

但除了性能之外，您还需要这部分:

@if (Model.Claims != null)
{
    foreach (var item in Model.Claims)
    {
        <tr>
            <td><input type="checkbox" class="chkbox-claim"/></td>
            <td>@item.ClaimNumber</td>
            <td>@item.Client</td>
            <td>@item.Amount</td>
            <td>@item.Deduction</td>
            <td>@item.Type</td>
            <td>@item.Status</td>
        </tr>                                   
    }
}

作为通过 get ajax 请求注入(inject)的部分。您将从 JS 中将起始索引作为参数传递(每次触发滚动到底部的功能时都会递增该索引)并返回一些 HTML。如果您预先返回整个结果集，但不想渲染全部结果，那么您可以将该片段作为部分内容存储在内存中，并从模​​型集合中一点一点地填充它(例如 10 个 block ) .

我不确定这种模板语言是什么

@if (Model.Claims != null)

但我很确定 Bootstrap 无法帮助您完成您所追求的目标，这是自定义的。

我希望这会有所帮助。