Recently, I acquired a Smart-table to manage and display a large data set for a graph. However, due to the size of the data, I do not want all of it to be rendered at once. I came across something called "Client Side Pagination" in the documentation, but unfortunately, it doesn't seem to function as expected when implemented. The variable objectDataArr[0] contains the entire data set.
Here is a visualization of what I have tried:
<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>