New Addon: Ember CLI Pagination - Looking to help people get setup

I don’t want to use the space for the first or last page.

Yes make it optional!!

If you click 10
< 1 2 3 4 5 6 7 8 9 10 >
(numPagesToShowBefore: 0, numPagesToShowAfter: 9, numPagesToShow: 10,)
you get:
< 5 6 7 8 9 10 11 12 13 14 >
(numPagesToShowBefore: 5, numPagesToShowAfter: 4, numPagesToShow: 10,)
If you click 13:
< 8 9 10 11 12 13 14 15 16 17>
(numPagesToShowBefore: 5, numPagesToShowAfter: 4, numPagesToShow: 10,)
If you click 8:
< 3 4 5 6 7 8 9 10 11 12 >
(numPagesToShowBefore: 5, numPagesToShowAfter: 4, numPagesToShow: 10,)
If you click 3:
< 1 2 3 4 5 6 7 8 9 10>
(numPagesToShowBefore: 2, numPagesToShowAfter: 7, numPagesToShow: 10,)

Perhaps:

midPos = int(numPagesToShow / 2)

if currentPage - midPod < 1
  numPagesToShowBefore = currentPage - 1
else
  numPagesToShowBefore = midPos

numPagesToShowAfter = numPagesToShow - numPagesToShowBefore - 1

To fix Myapp I think adding if (this.isValidPage to res.push(currentPage); and // add first and last page will fix this.

If you showFL we can add res.push(after+1);

// add first page if not already there
        if (res[0] !== 1) {
          res = [1].concat(res);
        } else {
          if (this.isValidPage(after + 1)) {
            res.push(after + 1);
          }
        }

but perhaps it is better to change the before and after earlier??

Will respond with coherent thoughts soon

Just uploaded my fixed test version: http://exmer.com/bloggrcouch/

for the Myapp fix I tried:

if (!this.isValidPage(currentPage)) {
 this.send('pageClicked', totalPages);
}

But I don’t understand calling an action on a component yet ;-(

I think it is better to change the before and after earlier:

https://github.com/broerse/ember-cli-pagination/commit/247903733d061041e9c71cd1aeafcad5e7f034c5

I came across this recent blogpost about pagination, might be useful: http://webcloud.info/blog/2014/11/01/building-a-real-world-pagination-with-ember-js-the-right-way

Thanks for the link. I think Mike is building pagination the right way though :wink:

Appreciated! Thanks @broerse

How can I keep my itemcontroller’s functionality with pagedArray()?

Previously I had

import Ember from 'ember';

export default Ember.ArrayController.extend({
  itemController: 'user',
});

Which worked fine. Now that my templates use

{{#each user in pagedContent}}

My itemcontrollers don’t work anymore

{{#if user.hasRoles}}

How do I hook these up?

EDIT: Since it seems the future of Ember is ‘no-controllers’, I moved the code from my ArrayController to a fresh Component. This works really well by the way! Thanks for the awesome plugin!

can you provide source code for this?

Not sure whet source code you like to see. Perhaps this ?:

thanks, i wanted the code for broerse one.

i’m having problem with using pagination on my project which uses firebase to store the data,so i wanted to see some examples on how its done. BTW i’m a newbie :smiley:

Sorry I use ember-pouch everywhere so I don’t know much about firebase. You can take a look at : https://github.com/KyleHelyar/enlightened_citizenry_ember

Oh, no problem bro.I’ll look into this.Thanks for replying.

Please could you provide the steps to run this application in my local?

I got it working. thank you guys:)