因此我得到了一个供女巫使用的智能表,我可以重新加载整个数据集(我需要它来绘制图形)。但我不希望一次渲染所有数据(太多)。因此,在文档中有一个叫做“客户端分页”的东西,但是由于某种原因,它似乎不起作用。objectDataArr[0]保存整个数据集
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>
问题在于,如果异步加载数据(如果我理解您的描述,您可能会这样做),则需要告诉智能表观看源集合,以便在发生更改时可以刷新它。为此,您需要使用st-safe- src
st-safe- src
<table st-safe-src="objectDataArr[0]" st-table="whateverVarYouWantToUseInTheTemplate"> <tr ng-repeat="item in whateverVarYouWantToUseInTheTemplate"></tr> </table>