AngularJS Paginator

So today I've finished my first AngularJS directive. And what can I say, I'm quite impressed, way to go Google team ! What I ended up with is a component that can paginate through any REST database listing by placing a single line of HTML on your page. 

http://github.com/MarianVasile/AngularJS-Paginator 


AngularJS Paginator

author: Marian Vasile, Dec 2012
This component paginates an ajax database service, with a single HTML line, and some CSS.
Steps for integration:
  1. In your listing HTML file add this line to the top and the bottom of the actual listing div or table
    <paginator current-page="{{ listing.current_page }}" total_pages="{{ listing.total_pages }}" call="searchListing" wclass="current_page"></paginator>
  2. Adjust the code in your Angular controller for the paginator scope (the same scope as the listing itself) to pass the page to $resource
- see the repapp-controller.js for instructions
  1. On the services side make sure to return the listing in this JSON format:
    {"current_page": 0,
"total_pages": 14,
"rows": [{
    {<your_data_here},
    {<your_data_here}
}] }
  2. Modify the CSS to format the page numbers
TODO: Need to create Jasmine tests

Comments

Post a Comment

Popular posts from this blog

Javascript factorial - performance considerations

I was playing with writing the best and shortest factorial function in javascript. Here are some results for you: (results from Mac OS running Chrome Version 55.0.2883.95 in Developer Console) f = n => n ? n * f(n - 1 ) : 1 ; console.time( 'factorial recursive' ); f( 9999 ); console.timeEnd( 'factorial recursive' ); VM272 : 1 factorial recursive : 0.733 ms However, a purely recursive function quickly runs into memory issues: console.time( 'factorial recursive' ); f( 9999999 ); console.timeEnd( 'factorial recursive' ); VM102 : 1 Uncaught RangeError : Maximum call stack size exceeded A better version is to use lodash reduce: f = n => n ? _(_.range( 1 ,n + 1 )).reduce((p,i) => p * i) : 1 ; console.time( 'factorial reduce' ); f( 9999 ); console.timeEnd( 'factorial reduce' ); VM301 : 1 factorial reduce : 1.724 ms console.time( 'factorial reduce large' ); f( 999999 ); console.time...
Read more

Manual pages optimized for search as well as for reading

A lot of online manual pages today, especially Objective-C are written with full object description in the main body, which makes it very hard to read but very good for search engines. To mend things, we could implement a graceful degradation of certain terms into shorter versions, while using HTML5 abbr and CSS to hide or fade out the full description. We can even offer the option to apply such contractions or not, based on user preferences (some minds may be more comfortable reading the full description). All contractions could be programmatically formatted by the blog (app) engine, based on a key:value pair list of abbreviations and clarifications. Here's an excerpt from such a man page taken from developer.apple.com: Instance and Data Life-Cycles It is important to understand that the life-cycle of the data a managed object represents is largely independent of the lifetime of individual managed object instances. In order to add a record to a persistent store, you must alloc...
Read more

To escape or not to escape. Part 2.

After testing and playing with the remap_string function on a real project, I've made some changes and fixes: I've introduced an encoding signature, such that you cannot re-encode by mistake an object that was already encoded. Currently I'm using the ord(ESC)ord(ESC) as signature, which in principle should not affect any future application of this function. I have changed the multi-byte UTF8 signature to 'y0y'. The previous signature (0y similar to 0x notation for hex chars) was not completely isolated and could have produced wrong decoding under certain conditions. I have included here the helper functions encode() and decode() which encode strings, arrays and objects. These two functions are currently using a global var "non_encoding_fields" to skip the object or array keys which should not be encoded. /* * Replace all non alpha characters with numeric codes * I'm using this to convert all data before storing into mongoDB / mySQL */ function ...
Read more