lorenzofox3 / Smart-Table

Code source of Smart Table module: a table/grid for Angularjs
http://lorenzofox3.github.io/smart-table-website/
1.8k stars 513 forks source link

st-sort-default="true" is not working fine with custom sort #827

Closed golf-x closed 1 year ago

golf-x commented 6 years ago

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: 'whatever@gmail.com'},
        {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
        {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
    ];

    scope.getters={
        firstName: function (value) {
            //this will sort by the length of the first name string
            return value.firstName.length;
        }
    }
}]);
MrWook commented 6 years ago

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

foxdog05000 commented 6 years ago

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.

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: image

Obtained result : image

MrWook commented 6 years ago

Hello @foxdog05000,

maybe you create a working plnkr for that issue

foxdog05000 commented 6 years ago

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.

MrWook commented 6 years ago

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.

foxdog05000 commented 6 years ago

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.