客户端分页无法在智能表中工作

时间:2015-04-19 16:41:31

标签: javascript angularjs pagination smart-table

所以我有一个Smart-table for witch我重新加载整个数据集(我需要它用于图表)。 但我不希望所有数据立即被渲染(太多了)。所以在文档中有一些名为"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>

2 个答案:

答案 0 :(得分:14)

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

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

答案 1 :(得分:2)

如果你像我一样冷静,你可能忘记将依赖关系传递给你的应用

    @Override
public void getLeaderboardGPGS() {
    if (gameHelper.isSignedIn()) {
        startActivityForResult(Games.Leaderboards.getLeaderboardIntent(gameHelper.getApiClient(), getString(R.string.event_score)), 100);
    }
    else if (!gameHelper.isConnecting()) {
        loginGPGS();
    }
}

@Override
public void getAchievementsGPGS() {
    if (gameHelper.isSignedIn()) {
        startActivityForResult(Games.Achievements.getAchievementsIntent(gameHelper.getApiClient()), 101);
    }
    else if (!gameHelper.isConnecting()) {
        loginGPGS();
    }
}