Yet another pagination directive for Angular. It supports both client-side and server-side pagination, and provides client level buffering.
If you want to install the directive with bower, simply type into your working directory the bower command.
bower install angular-flexipagination-directive
In order to run the example locally on your machine, just clone this repository, then install all the required dependencies with npm install
.
When done, just run npm start
, then navigate to localhost:8888
(the example is serverized by this awesome packet
by helloIAmPau, and the configurations can be found in the package.json
file).
Several grunt tasks have been defined for testing purpose (it's still a work in progress). You can run unit testing, e2e testing or both. For continuous testing, just the unit testing has been specified.
grunt unitTest
will execute karma testing oncegrunt e2eTest
will execute protractor testing once (please make sure that a webdriver-manager instance is running)grunt fullTest
will execute both karma and protractor testing oncegrunt testDev
will execute karma testing not in single run modegrunt
will just call the full test task
This directive provides 2 different ways of organizing data into separate pages: client-side and server-side.
If the client-pagination
flag is set to false
, each request will contain an extra object for pagination parameters:
generalRequest.pagination = {
limit: 100,
offset: 0
}
The server should be able to paginate the results and, according to the above example, send 100 results (limit) starting from zero (offset), along with the total result count:
generalResponse = {
count: 237,
results: { ... }
}
Please note that all the available page sizes should be exact submultiples of the selected buffer size, otherwise a lot of cute kitties are going to cry.
The client will paginate the buffered results, and no more requests will be sent to the server until the buffer is over.
If the client-pagination
flag is set to true
, the client will send a request to the server without any pagination coordinates.
In this case, the client will just retrieve the results and paginate them old school (it might be quite memory-consuming, so beware).
When including the directive into your html page, please include the following arguments:
displayable-results
an array that should be defined on the controller and will contain the chunk of results that can be displayedoriginal-request
the request that should be sent from the directive to the serviceon-page-change
the request promise that will be fired from the component when changing result chunkclient-pagination
a flag that informs the component how to paginate the results