when I click on a column header, sorting happens as expected while keeping null values at the bottom for both ascending and descending cases. It is working this way for all my columns except for the ones with date values where all null values are being placed on the top or bottom. Is this expected with AngularJS or am I doing something wrong?
Here is my JS code for sorting that is called using ng-click on a column header:
$scope.Data = $scope.Data.sort(function (a, b)
{
var firstValue = getDisplayValue(a, $scope.TableSorting.SortedByColumn);
var secondValue = getDisplayValue(b, $scope.TableSorting.SortedByColumn);
if (firstValue === null)
{
return 1;
}
else if (secondValue === null)
{
return -1;
}
if (isDate(firstValue) && isDate(secondValue))
{
firstValue = new Date(firstValue);
secondValue = new Date(secondValue);
}
if (typeof firstValue === 'string' && typeof secondValue === 'string')
{
firstValue = firstValue.toLowerCase();
secondValue = secondValue.toLowerCase();
}
if (firstValue < secondValue)
{
return $scope.TableSorting.SortInReverseOrder ? 1 : -1;
}
if (firstValue > secondValue)
{
return $scope.TableSorting.SortInReverseOrder ? -1 : 1;
}
return 0;
});
};
getDisplayValue = function (data, columnName) {
if (columnName == 'PreviousCallIsInbound')
{
return data.PreviousConferenceId ? (data.PreviousCallDate ? 'Yes' : 'No') : null;
}
if (columnName == 'NextCallIsInbound') {
return data.NextConferenceId ? (data.NextCallDate ? 'Yes' : 'No') : null;
}
return data[columnName];
};
this is the cshtml code that calls the function:
<table class="table table-hover table-special table-striped" id="tblMainTable" style="table-layout: fixed; width: 100%;">
<thead>
<tr>
<th style="width: 100px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'UserName',
'sorting_desc': TableSorting.SortedByColumn === 'UserName' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'UserName' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('UserName')">User</th>
<th style="width: 100px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'UserActionDate',
'sorting_desc': TableSorting.SortedByColumn === 'UserActionDate' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'UserActionDate' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('UserActionDate')">Action Date</th>
<th style="width: 150px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'UserActionName',
'sorting_desc': TableSorting.SortedByColumn === 'UserActionName' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'UserActionName' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('UserActionName')">Action</th>
<th style="width: 100px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'OfferId',
'sorting_desc': TableSorting.SortedByColumn === 'OfferId' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'OfferId' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('OfferId')">OfferId</th>
<th style="width: 200px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'PreviousConferenceId',
'sorting_desc': TableSorting.SortedByColumn === 'PreviousConferenceId' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'PreviousConferenceId' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('PreviousConferenceId')">Previous Conf Id</th>
<th style="width: 100px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'PreviousCallDate',
'sorting_desc': TableSorting.SortedByColumn === 'PreviousCallDate' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'PreviousCallDate' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('PreviousCallDate')">Previous Call Date</th>
<th style="width: 70px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'PreviousCallIsInbound',
'sorting_desc': TableSorting.SortedByColumn === 'PreviousCallIsInbound' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'PreviousCallIsInbound' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('PreviousCallIsInbound')">Previous Call Is Inbound</th>
<th style="width: 200px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'NextConferenceId',
'sorting_desc': TableSorting.SortedByColumn === 'NextConferenceId' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'NextConferenceId' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('NextConferenceId')">Next Conf Id</th>
<th style="width: 100px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'NextCallDate',
'sorting_desc': TableSorting.SortedByColumn === 'NextCallDate' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'NextCallDate' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('NextCallDate')">Next Call Date</th>
<th style="width: 70px;" ng-class="{'sorting': TableSorting.SortedByColumn !== 'NextCallIsInbound',
'sorting_desc': TableSorting.SortedByColumn === 'NextCallIsInbound' && TableSorting.SortInReverseOrder,
'sorting_asc': TableSorting.SortedByColumn === 'NextCallIsInbound' && !TableSorting.SortInReverseOrder
}" ng-click="sortByColumn('NextCallIsInbound')">Next Is Inbound</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="userActionReport in Data | filter : Paginate">
<td style="overflow-wrap: break-word;">
<span style="margin-top: 5px;">{{ userActionReport.UserName }}</span>
</td>
<td>
<span style="margin-top: 5px;">{{ userActionReport.UserActionDate }}</span>
</td>
<td>
<span style="margin-top: 5px;">{{ userActionReport.UserActionName }}</span>
</td>
<td>
<a ng-click="openOffer(userActionReport.OfferId, userActionReport.OfferUniqueKey)">
<span style="margin-top: 5px;">{{ userActionReport.OfferId }}</span>
</a>
</td>
<td style="overflow-wrap: break-word;">
<a ng-click="openConference(userActionReport.PreviousConferenceId)">
<span style="margin-top: 5px;">
{{ userActionReport.PreviousConferenceId }}
</span>
</a>
</td>
<td>
<span style="margin-top: 5px;">{{ userActionReport.PreviousCallDate }}</span>
</td>
<td>
<span style="margin-top: 5px;">
{{ userActionReport.PreviousConferenceId ? (userActionReport.PreviousCallDate ? 'Yes' : 'No') : ' ' }}
</span>
</td>
<td style="overflow-wrap: break-word;">
<a ng-click="openConference(userActionReport.NextConferenceId)">
<span style="margin-top: 5px;">{{ userActionReport.NextConferenceId }}</span>
</a>
</td>
<td>
<span style="margin-top: 5px;">{{ userActionReport.NextCallDate }}</span>
</td>
<td>
<span style="margin-top: 5px;">
{{ userActionReport.NextConferenceId ? (userActionReport.NextCallDate ? 'Yes' : 'No') : ' ' }}
</span>
</td>
</tr>
</tbody>
</table>
I tried including checks for undefined. Any help is appreciated!