marioosh/mercury-paginator

A paginator for Polymer 1.0

<mercury-paginator>

A Polymer element providing a solution to paginate lists.

Demo

Check it live!

Install

Install the component using Bower:

$ bower install mercury-paginator --save

Or download as ZIP.

Usage

1. Import polyfill:

   <script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>

2. Import custom element:

   <link rel="import" href="bower_components/mercury-paginator/mercury-paginator.html">

3. Start using it!

   <template is="dom-bind">
   
   
       <mercury-paginator perpage="15" items="{{items}}"></mercury-paginator>
   
       <!-- Your structure data here -->
       <div class="div-table">
           <div class="head-row">
               <div class="div-cell">Id</div>
               <div class="div-cell">Item name</div>
               <div class="div-cell">Description</div>
           </div>
   
           <template id="items" is="dom-repeat" items="{{items}}">
               <div class="div-row">
                   <div class="div-cell">{{item.id}}</div>
                   <div class="div-cell">{{item.name}}</div>
                   <div class="div-cell">{{item.description}}</div>
               </div>
           </template>
       </div>
   
   </template>

Usage

Specifies an array of elements to the component through the items property and set perpage property to a pagination number

*You can use iron-ajax element to fetch data from server.

Development

In order to run it locally you'll need to fetch some dependencies and a basic server setup.

1. Install bower & polyserve:

   $ npm install -g bower polyserve

2. Install local dependencies:

   $ bower install

3. Start development server and open http://localhost:8080/components/my-repo/.

   $ polyserve

History

For detailed changelog, check Releases.

License

MIT License