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

问题描述

所以我得到了一个智能表女巫我重新加载整个数据集（我需要它的图形）。
但我不希望所有的数据可以一次得到渲染（有太多）。因此，在文档中有一种叫做客户端分页但是这似乎并没有出于某种原因工作。 objectDataArr [0] 包含整个数据集

我的模拟起来是：

 ＆LT; D​​IV CLASS =容器＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
        ＆LT; D​​IV CLASS =COL-MD-4＆GT;
            ＆LT; H1＆GT;＆LT;强＆GT; preVIEW数据：{{objectTranslations [objectData.LangKey]}}＆LT; / STRONG＆GT;＆LT; / H1＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV CLASS =COL-MD-8＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
        ＆LT;表ST表=objectDataArr [0]级=表的表条纹＆GT;
            ＆LT;＆THEAD GT;
                ＆所述; TR＆GT;
                    百分位NG重复=山坳中objectData.Tables [0] .ColumnsST排序=COL codeNG-CLASS ={'DD-VH-2'：col.Length＆LT; = 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＆GT; 150放大器;＆放大器; col.Length＆下; = 250}＆GT ; {{objectTranslations [col.LangKey]}}＆下; /第i
                ＆LT; / TR＆GT;
                ＆所述; TR＆GT;
                    百分位纳克重复=栏在objectData.Tables [0] .Columns纳克级={DD-VH-2'：col.Length＆下; = 25，DD-VH-5'：山口。长度→25＆放大器;＆放大器; col.Length＆下; = 50，DD-VH-10'：col.Length→50＆放大器;＆放大器; col.Length＆下; = 100，DD-VH-15'：col.Length＆GT; 100安培;＆安培; col.Length＆LT; = 150'DD-VH-20：col.Length＆GT; 150安培;＆安培; col.Length＆LT; = 250}＆GT;
                        ＆LT;输入占位=搜索...ST-搜索=COL code/＆GT;
                    ＆LT; /第i
                ＆LT; / TR＆GT;
            ＆LT; / THEAD＆GT;
            ＆LT;＆TBODY GT;
                ＆LT; TR NG重复=行中objectDataArr [0]＆GT;
                    ＆LT; TD NG重复=山坳中objectData.Tables [0] .ColumnsNG-CLASS ={'DD-选择'：row.showRowButtons ==真，DD-VH-2'：col.Length＆LT; = 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＆GT; 150放大器;＆放大器; col.Length＆下; = 250} ＆GT;
                        ＆LT;跨度类=DD-细胞＆GT; {{行[COL code]}}＆LT; / SPAN＆GT;
                    ＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
            ＆LT; / TBODY＆GT;
            ＆LT;＆TFOOT GT;
                ＆所述; TR＆GT;
                    ＆LT; TD合并单元格=5级=TEXT-中心＆GT;
                        ＆LT; D​​IV ST-分页=ST-项目逐页=20ST-显示的页面=7＆GT;＆LT; / DIV＆GT;
                    ＆LT; / TD＆GT;
                ＆LT; / TR＆GT;
            ＆LT; / TFOOT＆GT;
        ＆LT; /表＆gt;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

解决方案

的问题是，如果你加载异步的数据，如果我理解你的描述，你会做什么，你需要告诉智能表看源集合因此它可以刷新每当有一个变化。对于您需要使用 ST-安全-SRC

 ＆LT;表ST-安全-SRC =objectDataArr [0]ST-表=whateverVarYouWantToUseInTheTemplate＆GT;
   ＆LT; TR NG重复=项whateverVarYouWantToUseInTheTemplate＆GT;＆LT; / TR＆GT;
＆LT; /表＆gt;
 

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