客户端分页在智能表中不起作用 [英] Client side pagination not working in smart table

问题描述

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

我的模型是:

<div class="row"><div class="col-md-4"><h1><strong>预览数据:{{objectTranslations[objectData.LangKey]}}</strong></h1>
<div class="col-md-8">

<div class="row"><table st-table="objectDataArr[0]" class="table table-striped"><头><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]}}</tr><tr><th ng-repeat="col in objectData.Tables[0].Columns" ng-class="{'dd-vh-2':col.Length<=25, 'dd-vh-5':col.长度＞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="搜索..." st-search="col.Code"/></th></tr></thead><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><脚><tr><td colspan="5" class="text-center"><div st-pagination="" st-items-by-page="20" st-displayed-pages="7"></div></td></tr></tfoot>

解决方案

问题是如果你异步加载你的数据，如果我理解你的描述，你可能会这样做，你需要告诉 smart-table 观看源集合所以只要有变化就可以刷新.为此，您需要使用 st-safe-src

<tr ng-repeat="item inwhateverVarYouWantToUseInTheTemplate"></tr>

So I got a Smart-table for witch I reload the entire data-set (I need it for a graph). but I don't want all data to get rendered at once (got too many). So in the documentation there is something called "Client Side Pagination" but that does not seem to work for some reason. objectDataArr[0] holds the entire data-set

My mock up is:

<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>

解决方案

The problem is that if you load your data asynchronously, which you likely do if I understand your description, you need to tell smart-table to watch the source collection so it can refresh whenever there is a change. For that you need to use the st-safe-src

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

这篇关于客户端分页在智能表中不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！