htmlangularjsrestpaginationsmart-table

Pagination doesn't work on smart-table when using data from a REST service


So I got a smart-table, which gets the data from a REST service and displays it. When I try to add pagination the application show errors in the html code, saying all attributes needed on pagination are not allowed there.

Here is my actual code for the table:

<table id="mytable" st-safe-src="dataSet" st-table="displayed" class="table table-responsive portlet-body panel-body">
    <thead>
        <tr >
            <th >A COLUMN</th>
            <th >A COLUMN</th>
            <th >A COLUMN</th>
            <th >A COLUMN</th>
            <th >A COLUMN</th>
        </tr>
    </thead>
    
    <tbody data-ng-dblclick="scrollTo()">

        <tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-click="$parent.setClickedRow($index)" and data-ng-class="{'selected':$index == $parent.selectedRow}">
            <td data-ng-click="$parent.selData(row);">{{$index}}</td>
            <td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
            <td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
            <td data-ng-click="$parent.selData(row);">{{row.qwe}}</td>
            <td data-ng-click="$parent.selData(row);">{{row.ewq}}</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> 

Solution

  • After tons of changes finally I made it work, I post the table code if someone needs it.

    <div class="smart-table-container">
                    <table id="mytable" st-safe-src="dataSet" st-table="displayed" class="smart-table table">
                        <thead>
                        <tr >
                            <th >A COLUMN</th>
                            <th >A COLUMN</th>
                            <th >A COLUMN</th>
                            <th >A COLUMN</th>
                            <th >A COLUMN</th>
                        </tr>
                    </thead>
    
                    <tbody data-ng-dblclick="scrollTo()">
    
                        <tr data-ng-repeat="row in displayed" st-select-row="row" st-select-mode="single" data-ng-click="$parent.setClickedRow($index)" and data-ng-class="{'selected':$index == $parent.selectedRow}">
                            <td data-ng-click="$parent.selData(row);">{{$index}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.asd}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.dsa}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.qwe}}</td>
                            <td data-ng-click="$parent.selData(row);">{{row.ewq}}</td>
                        </tr>
                    </tbody>
                        <tfoot>
                            <tr>
                                    <td class="text-center" st-pagination="" st-items-by-page="5" colspan="8">
                                    </td>
                            </tr>
                        </tfoot>
                    </table>
                </div>