comindware.core.ui/src/list/templates/paging.html

Comindware Core UI provides the basic components like editors, lists, dropdowns, popups that we so desperately need while creating Marionette-based single-page applications.

<div class="dataset-footer__left">
    <div class="js-total-records-count-region">{{localize 'PROCESS.LISTS.LISTCONTEXT.TOTALROWSCOUNT'}}: {{totalRowsCount}} {{#if selectedRowsCount}} ({{localize 'PROCESS.LISTS.LISTCONTEXT.SELECTEDROWSCOUNT'}}: {{selectedRowsCount}}){{/if}}</div>
</div>
<div class="dataset-footer__center pagination">
    <span class="js-first-button pagination__i pagination__i_btn"><i class="fal fa-angle-double-left"></i></span>
    <span class="js-previous-button pagination__i pagination__i_btn"><i class="fal fa-angle-left"></i></span>

    {{#if pageControls.firstPage}}<span class="js-first-page-button pagination__i">{{pageControls.firstPage}}</span>{{/if}}
    {{#if pageControls.hasPrevItems}}<span class="pagination__i">...</span>{{/if}}
    {{#if pageControls.doublePrevPage}}<span class="js-doublePrev-button pagination__i">{{pageControls.doublePrevPage}}</span>{{/if}}
    {{#if pageControls.prevPage}}<span class="js-prevPage-button pagination__i">{{pageControls.prevPage}}</span>{{/if}}
    {{#if pageControls.currentPage}}<span class="js-currentPage-button pagination__i pagination__i_selected">{{pageControls.currentPage}}</span>{{/if}}
    {{#if pageControls.nextPage}}<span class="js-nextPage-button pagination__i">{{pageControls.nextPage}}</span>{{/if}}
    {{#if pageControls.doubleNext}}<span class="js-doubleNext-button pagination__i">{{pageControls.doubleNext}}</span>{{/if}}
    {{#if pageControls.hasPostItems}}<span class="pagination__i">...</span>{{/if}}
    {{#if pageControls.lastPage}}<span class="js-last-page-button pagination__i">{{pageControls.lastPage}}</span>{{/if}}

    <span class="js-next-button pagination__i pagination__i_btn"><i class="fal fa-angle-right"></i></span>
    <span class="js-last-button pagination__i pagination__i_btn"><i class="fal fa-angle-double-right"></i></span>
</div>
<div class="dataset-footer__right">
    <div class="js-records-per-page-region"></div>
</div>