Update the pagination elements to use bootstrap 4.

[Udayan12167]

https://getbootstrap.com/docs/4.0/components/pagination/

The li tags need to have the page-item class and the a tags inside them need to have a page-link tags.

[giladron]

yeap, converted my app to use bootstrap 4 and no buttons are displayed just numbers of the pages, working but looks poor visually

[rbanno]

Hi - I've just upgraded and this was easily fixed:

$templateCache.put('template/smart-table/pagination.html',
            '<div class="pagination mx-auto" ng-if="pages.length >= 2"><ul class="pagination">' +
            '<li class="page-item" ng-repeat="page in pages" ng-class="{active: page==currentPage}"><a class="page-link" ng-click="selectPage(page)">{{page}}</a></li>' +
            '</ul></div>');

Added the mx-auto to ensure that the pagination is centered and added classes to the ul and li tags that are required for Bootstrap V4

[PlexaFCI]

hi rbanno, i had the same issue, where the "$templateCache.put(..." should be applied to fix this?

[Xsmael]

hi rbanno, i had the same issue, where the "$templateCache.put(..." should be applied to fix this?

You could save the template in a file and call it with the st-template directive like so:

template file :

<div class="pagination mx-auto" ng-if="pages.length >= 2">
    <ul class="pagination">
        <li class="page-item" ng-repeat="page in pages" 
        ng-class="{active: page==currentPage}"><a class="page-link"
        ng-click="selectPage(page)">{{page}}</a></li>
    </ul>
</div>

and in your table in the footer you do this:

<tfoot>
    <tr>
        <td colspan="5" class="text-center">
            <div st-pagination="" st-items-by-page="2" st-displayed-pages="7" st-template="tmpl/partials/b4-pagination.html"></div>
        </td>
    </tr>
</tfoot>

make sure you correct the path to match yours.