Currently, I am working on a table that needs sorting in my Angular project (v1.2.12). To facilitate this, I have integrated the ngTable module (v0.3.2) from ngTable.
The default sorting is based on the title column, but I also want to allow sorting by year. The issue I am facing is that when I click on a table heading to sort the column, the actual sorting is not reflected in the header, and the sorting parameter is unset.
Upon debugging, I noticed that params.sorting() returns: {title: undefined}. Subsequently, I am unable to click on any sortable headers as they become unresponsive.
I believe there might be something I am overlooking, although I can't pinpoint it at the moment.
Here is how my data looks:
[{
"year": 2014,
"title": "Golden title"
}, {
"year": 2013,
"title": "Golden title"
}, {
"year": 2013,
"title": "Another title"
}, {
"year": 2014,
"title": "Whetshoverwerd xsade aas"
}, {
"year": 2013,
"title": "Another brilliant title"
}, {
"year": 2013,
"title": "Wherever I may SOAP"
}]
The view component looks like this:
<table ng-table="tableParams" class="table">
<tbody>
<tr ng-repeat="document in $data">
<td data-title="'Year'" sortable="'year'">{{document.year}}</td>
<td data-title="'Title'" sortable="'title'"><a href="#">{{document.title}}</a></td>
</tr>
</tbody>
</table>
This view is encapsulated within a directive:
angular.module('appDirectives').directive('myModuleDirective', function () {
// Directive logic
return {
restrict: 'E',
templateUrl: 'path/to/view.html',
replace: true,
controller: function ($scope, $timeout, $filter, TitleList, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1,
count: 10,
sorting: {
title: 'asc'
}
}, {
total: 0,
getData: function ($defer, params) {
TitleList.get({}, function (data) {
var orderedData = params.sorting() ?
$filter('orderBy')(data, params.orderBy()) :
data;
params.total(orderedData.length);
orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());
$defer.resolve(orderedData);
});
}
});
}
};