在局部視圖中向我的表添加無限滾動

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>

我希望向該表添加無限滾動，目前我有默認值，這是我從引導程序默認獲取的。

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將無法幫助您完成所追求的目標，這是自定義的。

我希望這有幫助。