Smart-Table
Smart-Table copied to clipboard
st-sort-default="true" is not working fine with custom sort
AngularJs version - 1.5.2 Smart table version - 2.1.10
As in the following example, if we use st-sort-default="true" on
<th st-sort="getters.firstName">first name</th>
The default sort is not working fine on first load
<table st-table="rowCollection" class="table table-striped">
<thead>
<tr>
<th st-sort="getters.firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-sort="birthDate">birth date</th>
<th st-sort="balance" st-skip-natural="true" >balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName | uppercase}}</td>
<td>{{row.lastName}}</td>
<td>{{row.birthDate | date}}</td>
<td>{{row.balance | currency}}</td>
<td><a ng-href="mailto:{{row.email}}">email</a></td>
</tr>
</tbody>
</table>
app.controller('sortCtrl', ['$scope', '$filter', function (scope, filter) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: '[email protected]'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];
scope.getters={
firstName: function (value) {
//this will sort by the length of the first name string
return value.firstName.length;
}
}
}]);
Hello @sarawut-p,
what is not working with the directive? st-sort-default="true" will sort the data ASC. The given data is already sorted in this way so there isn't a change from the natural order for the custom sort function where it will sort after the length of the name
Hi, I'm having the same problem. The getter in st-sort works very well except when initializing the table the sorting is done in a strange way. Despite the ridge of having put st-default-sort="true" I have the impression that the getter is not used during the first loading of the table.
But as soon as I sort the column the getter works perfectly ! I have a feeling this PR #773 is targeting that particular problem.
- AngularJS : 1.6.9
- Smart table : 2.1.11
Exemple (sample of my code)
<div st-safe-src="probes" st-table="displayProbes">
...
<th class="default-sort sortable" st-multi-sort="sortByName" st-sort-default="true" ng-click="sortColumn('name')"> {{'commons.tableHeader.name' | i18next}} </th>
scope.sortByName = function (row) { return row.name.toLowerCase(); };
Expected result:

Obtained result :

I created a plnkr, if use st-sort : work perfectly ! But I use st-multi-sort to get a multi-sort: my problem is present ! I tested the modification made by PR #773 and my problem is fixed !
I'm add exemple of @sarawut-p on plnkr.
In the given plnkr isn't a smart-table its some "Studen Board". Also if your error occures with a third party library i wouldn't say that Smart-Table is the main problem, even if it can be fixed inside Smart-Table. It could be a issue from the third party library.
Indeed you are right, in this case I open a way out in the st-multi-sort libthird to see with its creator for this problem.