angularjssortingpaginationdirpagination

Can not sort table data alphabetically while using pagination in Angular.js


I have an issue.I am unable to sort table data in alphabetical order using Angular.js dir-paginate.Here i need to sort data from all page but in recent condition its sorting data for current page.I am explaining my code below.

<tbody id="detailsstockid">
 <tr dir-paginate="cus in ($parent.labelResults=(listOfCustomerData  | filter:searchProduct.rest_name)) | itemsPerPage:5 | orderBy:'rest_name' track by $index" current-page="currentPage">
 <td>{{itemsPerPage *(currentPage-1)+$index+1}}</td>
<td>{{cus.rest_name}}</td>

 <td>{{cus.quadrant_name}}</td>
<td>{{cus.city}}</td>
 <td>{{cus.proviance}}</td>

<td>{{cus.person}}</td>
<td>{{cus.mobile}}</td>
<td>{{cus.url}}</td>
    <td ng-if="cus.status==1">Active</td>
 <td ng-if="cus.status==0">Inactive</td>
<td ng-if="cus.premium==1">Yes</td>
 <td ng-if="cus.premium==0">No</td>
<td >
<a ui-sref="dashboard.customer.view">
<input type='button' class='btn btn-xs btn-green' value='Edit' ng-click="editProductViewData(cus.member_id);">  
</a>
</td>
<td>
<a ui-sref="dashboard.customer.view">
<input type='button' class='btn btn-xs btn-red' value='Delete' ng-click="deleteProductInfoData(cus.member_id);" >  
</a>
</td>
</tr>   
</tbody>

In this case i can sort only the current page data but i need to sort data from the total array(i.e-listOfCustomerData).I am attaching my output below.

enter image description here

In this above pic the restaurant name is starting from c and this is page 1 pic.

enter image description here

For the page 2 the restaurant name is starting from b which is given above.Here i need all the restaurant should sort in alphabetically but not as per page.Please help me.


Solution

  • The order in which you chain filters is significant. Currently you're paginating before sorting:

     <tr dir-paginate="... | itemsPerPage:5 | orderBy:'rest_name' ...">
    

    ...so the sort only affects the portion of the unsorted list that passed through the pagination filter.

    In this case, all you need is do swap that order, and sort before paginating instead. Now the entire list will be sorted first, and then split into separate pages.

    ... | orderBy:'rest_name' | itemsPerPage:5 ...