md-data-table pagination is not working when a page has more than one table

[sohampshetty]

I have to create tables using md-data-table by looping an array, which is working great with my requirement. However, when I update one of a table(fetching next row's, for example), then automatically other tables are getting updated. How can I differentiate each table, so that I can keep updated single data-table at a time?

@daniel-nagy, please take a look, here is a codepen. Thanks in advance!

[ielektronick]

Hi sohampshetty Well, what did you expect if you're using the same query object for all array? :) I would say that each of your arrays should contain query object. I've updated the codepen (at least I hope so :) ).

[sohampshetty]

@ielektronick that's nice. what if I don't now how many times I need to iterate?

[ielektronick]

@sohampshetty well, you don't need to. All you need is too distinguish query objects for each table.

[sohampshetty]

@ielektronick I iterated arrays just to demonstrate, but in real time scenario, it's totally different. So below is what I am doing. I have declared this.state in the controller and using it in template's limit and page option. Everything is fine, but it showing all rows instead of just 10. this.state = { query: { limit: 10, page: 1 }, query1: { limit: 10, page: 1 } }

<md-table-pagination md-limit="$ctrl.state.query.limit" md-limit-options="[5, 10, 20]" md-page="$ctrl.state.query.page" md-total="{{data.length}}" md-page-select="true" md-boundary-links="true" md-on-paginate="$ctrl.handlePagination" md-label="{rowsPerPage: 'Rows per page'}"></md-table-pagination>

[ielektronick]

Hi @sohampshetty Well, if I understood you correctly, then it should be like that:

this.states = [];
this.getQueryFor = function(index){
    if (this.states[index] === undefined) {
        this.states[index] = { limit: 10, page: 1 };
    }

    return this.states[index];
};

In your ng-repeat:

<md-table-pagination md-limit="$ctrl.getQueryFor($index).limit" md-limit-options="[5, 10, 20]"
            md-page="$ctrl.getQueryFor($index).page" md-total="{{data.length}}" 
            md-page-select="true" md-boundary-links="true" md-on-paginate="$ctrl.handlePagination"
            md-label="{rowsPerPage: 'Rows per page'}">
</md-table-pagination>

But it's a really quick and dirty solution. :)

[Abiwax]

Tried this solution but it does not work for me, the two tables are completed different tables and are not in the same list