javascript - 客户端分页在智能表中不起作用

Question

所以我得到了一个智能表，我重新加载了整个数据集(我需要它来制作图表)。但我不希望一次呈现所有数据(太多)。所以在文档中有一个叫做 "Client Side Pagination" 的东西但由于某种原因，这似乎不起作用。 objectDataArr[0] 包含整个数据集

我的模型是:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <h1><strong>Preview Data: {{objectTranslations[objectData.LangKey]}}</strong></h1>
        </div>
        <div class="col-md-8">
        </div>
    </div>
    <div class="row">
        <table st-table="objectDataArr[0]" class="table table-striped">
            <thead>
                <tr>
                    <th ng-repeat="col in objectData.Tables[0].Columns" st-sort="col.Code" ng-class="{'dd-vh-2':col.Length<=25 , 'dd-vh-5':col.Length>25 && col.Length<=50, 'dd-vh-10':col.Length>50 && col.Length<=100, 'dd-vh-15':col.Length>100 && col.Length<=150, 'dd-vh-20':col.Length>150 && col.Length<=250}">{{objectTranslations[col.LangKey]}}</th>
                </tr>
                <tr>
                    <th ng-repeat="col in objectData.Tables[0].Columns" ng-class="{'dd-vh-2':col.Length<=25 , 'dd-vh-5':col.Length>25 && col.Length<=50, 'dd-vh-10':col.Length>50 && col.Length<=100, 'dd-vh-15':col.Length>100 && col.Length<=150, 'dd-vh-20':col.Length>150 && col.Length<=250}">
                        <input placeholder="Search ..." st-search="col.Code" />
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="row in objectDataArr[0]">
                    <td ng-repeat="col in objectData.Tables[0].Columns" ng-class="{'dd-selected': row.showRowButtons == true, 'dd-vh-2':col.Length<=25 , 'dd-vh-5':col.Length>25 && col.Length<=50, 'dd-vh-10':col.Length>50 && col.Length<=100, 'dd-vh-15':col.Length>100 && col.Length<=150, 'dd-vh-20':col.Length>150 && col.Length<=250}">
                        <span class="dd-cell">{{row[col.Code]}}</span>
                    </td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="5" class="text-center">
                        <div st-pagination="" st-items-by-page="20" st-displayed-pages="7"></div>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</div>

Answer 1

问题是，如果您异步加载数据(如果我理解您的描述，您可能会这样做)，您需要告诉 smart-table 监视源集合，以便它可以在发生更改时刷新。为此，您需要使用 st-safe-src

<table st-safe-src="objectDataArr[0]" st-table="whateverVarYouWantToUseInTheTemplate">
   <tr ng-repeat="item in whateverVarYouWantToUseInTheTemplate"></tr>
</table>