AngularJS - Default Sort Order not rendering table on search

Question

I have the following code that I have created for sorting and searching.

When I add aaSorting I am able to get the initial table to sort by my specified column. However, on search the table completely goes away, that is removed from the DOM.

Without default aaSorting chained to the dtOptionsBuilder I can search but without default sort order set.

How can I remedy the issue?

Angular Code

$scope.searchOrderHistoryData = function(){
  if ($scope.searchQuery.trim() == "")
  {
      $scope.cancel=false;
      return;
  }
  else{
    $scope.IssearchQuery = true;
  }
    $scope.filterOrderHistoryData = $scope.orderHistory.filter(function(r) {

     res = "";
     found = true;
    for (key in r)
     {
       if ((key == "OrderId" || key == "OrderName" || key == "TotalCost" || key == "SubmittedDate" || key == "SubmittedBy" || key== "Status") && r[key] != null)
         res += angular.lowercase(r[key].toString()) + " ";
     }
      if (res.indexOf(angular.lowercase($scope.searchQuery)) >= 0)
        return true;
    return false;
    });

}

       var orderHistoryCols = {'OrderId':0, 'TotalCost':1, 'SubmittedDate':2, 'SubmittedBy':3, 'Status':4};

    $scope.dtOptions = DTOptionsBuilder.newOptions()
    .withOption('responsive', true)
    .withOption('fnDrawCallback', function () {
      $('.dataTables_scrollBody').on("scroll", function(){  //activate when #center scrolls
       var left = $('.dataTables_scrollBody').scrollLeft();  //save #center position to var left
       $('.dataTables_scrollHead').scrollLeft(left);        //set #top to var left
      });
    })
    .withOption('bAutoWidth', false)
    //.withOption('sorting', false)
    .withOption('scrollY', '450px')
    .withOption('aaSorting', [[orderHistoryCols.SubmittedDate, 'desc']]);

Template (HTML)

<table datatable="ng" class="table" dt-options="dtOptions" dt-column-defs="dtColumnDefs">
              <thead style="background-color: #d8d8d8;">
               <tr>
                   <!--th ng-hide="true"></th-->
                   <th>Order #</th>
                   <th>Total Cost</th>
                   <th>Submitted</th>
                   <th>By</th>
                   <!-- <th>Delivered</th> -->
                   <th>Status</th>
                   <th data-orderable="false"></th>
                   <th data-orderable="false"></th>
               </tr>
              </thead>
           <tbody>
                  <tr style="font-weight: 100;cursor: pointer;" ng-repeat="data in filterOrderHistoryData">

Table data...
</tr> 
           </tbody>
       </table>

With .withOption('aaSorting', [[orderHistoryCols.SubmittedDate, 'desc']]); I have to click another column first to prevent this DOM deletion. When I immediately click on SubmittedDate to sort ascending first then the issue of DOM deletion occurs. Why? Also table double flickers (flickers when I sort or filter, so twice rendering occurs only in this case) — Vahe, Jan 25 '17 at 17:36

score 0 · Accepted Answer · answered Jan 26 '17 at 02:49

The last line needs to be written as follows as single dimensional (size = 1) array in order to properly sort by one column only.

.withOption('aaSorting', [orderHistoryCols.SubmittedDate, 'desc']);

The array of arrays in my original question had double brackets (opening and closing).

.withOption('aaSorting', [[orderHistoryCols.SubmittedDate, 'desc']]);

AngularJS - Default Sort Order not rendering table on search

1 Answers1