Question

我的局部视图中有一张表，

<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请求注入的部分内容。您将从JS开始作为参数传递起始索引（每次触发滚动功能时都会递增）并返回一些HTML。如果您在前面返回整个结果集但不想全部渲染它的情况下，那么您将该片段存储为内存中的部分内容并将其从模型集合中逐位填充，例如块数为10

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

@if (Model.Claims != null)

但是我很确定Bootstrap无法帮助你完成你的目标，这是定制的。

我希望这会有所帮助。

在局部视图中向我的表添加无限滚动

1 个答案: