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

Question

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>

Why is there an and attribute on your first <tbody> <tr>? — kiswa
Due to a unrelated scroll to a part of the html where the data of the table is displayed — Noble

Noble Noble · Accepted Answer · 2015-07-07T07:40:28

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>

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

3 Answers