knownasilya/pagination-pager

Examples?

twisted1919 opened this issue · 10 comments

Hi,
How do you actually use this, with ember-data for example?
A clear example would help a lot...
Thanks.

So this is a UI component; how you implement pagination is totally up to you.
Check out the guides https://guides.emberjs.com/v2.3.0/models/handling-metadata/ for a simple example on how to use metadata for pagination.

I can put that link in the readme if you think it could help others.

Thanks for the info, i kind of figured it out is a UI component, i am a bit confused as to why when pressing links into the pagers, they don't show in the actual url?
I think i am missing the point of this...i would expect that once you press the links, then the url changes too and based on that i could pull info from the remote API.

So if you made the bound attributes into query param, then it would change the url.

https://guides.emberjs.com/v2.3.0/routing/query-params/

Thing is that i did exactly that, my controller:

import Ember from 'ember';

export default Ember.Controller.extend({

    queryParams: ['page'],
    page: 1

});

My route:

import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';

export default Ember.Route.extend(AuthenticatedRouteMixin, {
    session: Ember.inject.service('session'),
    setupController (controller, model) {
        this._super(controller, model);
        controller.set('totalPages', model.get('meta.page_count'));
    },
    queryParams: {
        page: {
            refreshModel: true
        }
    },
    model(params) {
        var query = {};

        if(Ember.isPresent(params.page)) {
            query.page = params.page;
        }

        return this.store.query('item', query);
    },

My template:

{{pagination-pager current=1 count=totalPages urlTemplate='localhost:4200/items/?page={current}'}}

The pagination shows, the links in pagination are all fine, but i press on them and nothing happens, no url change at all...

You don't need the urlTemplate in most cases, so remove that from your version, and bind current to page, {{pagination-pager current=page count=totalPages}}.

Note in the readme that urlTemplate is for opening in new windows.

That does it, that you very much, i knew it was simple but didn't know what, maybe include this small thing in the README file, would help a lot of people like me ;)

I did exactly what @twisted1919 did, worked like a charm. But now I'm trying to add objects to the model array and it's not reflecting on template. Any clues?

I'm doing this.store.push(this.store.normalize(modelName, {id: 300}))

That would only work if you used the filter addon https://www.npmjs.com/package/ember-data-filter (or the alternate example they give) otherwise you have to add to the same array.

@knownasilya figured out. Don't know exactly why but after I push to store I needed to push to the array using something like this: model.content.pushObject(pushedRecord._internalModel);

You should be able to do model.pushObject(pushedRecord) since it's proxied.