Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save definitelynotsoftware/4c7a339229081e44e514 to your computer and use it in GitHub Desktop.
Save definitelynotsoftware/4c7a339229081e44e514 to your computer and use it in GitHub Desktop.
AngularJS sorting paged table using UI-bootstrap
vm.sortTable = sortTable;
vm.reverseSort = false;
vm.currentPage = 1;
vm.numPerPage = 5;
vm.maxPageSize = 5;
var defaultNumberPerPage = 5;
function sortTable(header) {
// used by the sort order 'caret'
vm.orderByField = header;
// show all (unpaged) items.
vm.numPerPage = vm.filteredQuotes.length; // the total count of the array
// sort by the selected header, reverse when descending
vm.reverseSort = !vm.reverseSort;
vm.filteredQuotes = _.sortBy(vm.filteredQuotes, header);
if (vm.reverseSort) {
vm.filteredQuotes.reverse();
}
// reset the paging to default
vm.numPerPage = defaultNumberPerPage;
}
<table class="table table-bordered table-condensed">
<tr>
<th>
<a data-ng-click="vm.sortTable('QuoteNumber')">Quote #
<span data-ng-show="vm.orderByField == 'QuoteNumber'">
<span data-ng-show="!vm.reverseSort">^</span><span data-ng-show="vm.reverseSort">v</span>
</span>
</a>
</th>
</tr>
<tbody>
<tr data-ng-repeat="w in vm.filteredQuotes | filter : paginate">
<td>{{w.QuoteNumber}}
</td>
</tr>
</tbody>
</table>
<pagination total-items="vm.filteredQuotes.length" page="vm.currentPage"
max-size="vm.maxPageSize" boundary-links="true"
items-per-page="vm.numPerPage" class="pagination-sm">
</pagination>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment