smart-table pager not working

Question

I have a Asp.net MVC project with AngularJs as javascript framework.

I am using smart-table angular plugin for my table\grid requirement. Everything works fine but the pager is not showing up at all on page.

Below is my html code:

<div data-ng-controller="gridcontroller" class="row">
    <label>Grid demo</label>
    <table data-st-table="griddata" class="table striped">
        <thead>
            <tr>
                <th>first name</th>
                <th>last name</th>
                <th>birth date</th>
                <th>balance</th>
                <th>email</th>
            </tr>
        </thead>
        <tbody>
            <tr data-ng-repeat="row in griddata">
                <td data-ng-bind='row.firstName'></td>
                <td data-ng-bind='row.lastName'></td>
                <td data-ng-bind='row.birthDate'></td>
                <td data-ng-bind='row.balance'></td>
                <td data-ng-bind='row.email'></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="5" class="text-center">
                    <div st-template="~/Scripts/Angular/Plugins/pagination.html" st-pagination="" 
st-items-by-page="10">
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>

Pagination.html markup is as below:

<div class="pagination" ng-if="pages.length >= 2">
<ul class="pagination">
    <li ng-if="currentPage > 1">
        <a ng-click="selectPage(1)">&lt;&lt;</a>
    </li>
    <li ng-if="currentPage > 1">
        <a ng-click="selectPage(currentPage-1)">&lt;</a>
    </li>
    <li ng-repeat="page in pages" ng-class="{active: page==currentPage}">
        <a ng-click="selectPage(page)">{{page}}</a>
    </li>
    <li ng-if="currentPage < numPages">
        <a ng-click="selectPage(currentPage+1)">></a>
    </li>
    <li ng-if="currentPage < numPages">
        <a ng-click="selectPage(numPages)">>></a>
    </li>
</ul>

When I run the site I see the grid with all records (60 in my case) and the pager markup is shown as below:

<tfoot>
   <tr>
      <td colspan="5" class="text-center">
           <div st-template="/Scripts/Angular/Plugins/pagination.html"                           st-pagination="" st-items-by-page="itemsByPage" class="ng-isolate-scope">
               <!-- ngIf: pages.length >= 2 -->
          </div>
      </td>
   </tr>
 </tfoot>

I did every step as mentioned on the site but can't make the pager work. Any help is deeply appreciated.

Answer 1

Hi if you are using server side pagination then you need to tell smart table about the number of pages, so that it will get the clue about the pages it is going to display and bind its event upon it

tablestate.pagination.numberOfPages = response.totalPages;

you have to set the total number of pages from the response to the tablestate's pagination object numberOfPages property.