Simple Angular pagination directive
npm install ly-pagination --save
In CommonJS environment:
angular.module('yourApp', [require('ly-pagination')])
,
or in normal html, just load ly-pagination.min.js
script in your html.
Then in your page, add the tag in your html:
<ly-pagination total-records="totalRecords"
page-size="pageSize"
auto-reset="autoReset"
</ly-pagination>
With 1.0.10+, you can config the button text(first, previous, next, last) with the lyPaginationConfigProvider
without passing your custom text to directive every time.
angular.module('demo', ['lyPagination'])
.config(['lyPaginationConfigProvider', function(lyPaginationConfigProvider) {
lyPaginationConfigProvider.setCustomButtonText({
prevText: 'previous',
nextText: 'next',
firstText: 'first',
lastText: 'last'
});
}])
.controller('ctrl', function(){
//...
});
totalRecords: '=', total number of your items pageSize: '=', maximum records of every page, default 10 pageDisplayNumber: '=', number of pages to display in the pagination list, default 5, page 1 to 5 autoReset: '=', init the pagination at the beginning, usually you should broadcast the event to notify the pagination to initialize, if your data is loaded by ajax, default: false prevText: '@', set your custom text, html tag supported nextText: '@' firstText: '@' lastText: '@' name: '@', prefix for pagination events below, which makes it possible to use multiple paginiations in the same page, see demo hideFirst: '=', hide the 1-2 page button when user is in large pages ( which is > 3), default: false
pageChange: the directive will $emit
this event when user click on different a page
resetPagination: you should $broadcast
this event to notify the directive to reset the pagination ui,
if the autoReset
is false
(default), you also need to broadcast this for the first time(after you load async data),
otherwise it will initialize the ui at the beginning without emit this event.
$scope.$broadcast('resetPagination', totalRecords, newPageSize);
if
name
option is passed, the events will be prefixed with the${name}_
, e.g name="custom" ->custom_pageChange
&custom_resetPagination
npm install
,
Then open index.html
in demo
dir
MIT