I am using angularjs ng-table module. I would like to make a table sortable by clicking the heading. Here is the relevant html code.
<div ng-controller="ViewCtrl" class="container">
<table ng-table="tableParams" class="table table-bordered">
<thead>
<tr>
<th>name</th>
<th>changeInPercent</th>
<th>Ratio</th>
</tr>
<thead>
<tbody>
<tr ng-repeat="stk in $data">
<td data-title="'name'" filter="{ name: 'text'}" sortable="'name'" " >
{{stk.name}}
</td>
<td data-title="'changeInPercent'" >
{{stk.changeInPercent}}
</td>
<td data-title="'Ratio'" >
{{stk.Ratio}}
</td>
</tr>
</tbody>
</table>
</div>
The relevant controller code looks like this;
.controller('ViewCtrl', ['$scope', '$http', 'configuration', 'ngTableParams',
function ($scope, $http, $configuration, ngTableParams) {
var tableData = [];
//Table configuration
$scope.tableParams = new ngTableParams({
page: 1,
count: 100
}, {
total: tableData.length,
//Returns the data for rendering
getData: function ($defer, params) {
var url = $configuration.webroot + '/fsa/list?list=XXlist';
$http.get(url).then(function (response) {
tableData = response.data;
$defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
params.total(tableData.length);
});
}
});
}])
The table data is displayed correctly. I expect the name column to be sortable by clicking on it. However, the name column remains unsortable. What is wrong with the code?