2017-01-25 21 views
0

私はソートと検索のために作成した次のコードを持っています。AngularJS - 既定の並べ替え順序が検索でレンダリングされないテーブル

aaSortingを追加すると、指定した列で初期テーブルをソートすることができます。しかし、検索では、テーブルが完全になくなり、DOMから削除されます。

デフォルトでは、aaSortingはdtOptionsBuilderにチェーンされていますが、デフォルトのソート順は設定されていません。

問題をどのように修正できますか?

角度コード

$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']]); 

テンプレート(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> 
+0

.withOption( 'aaSorting'、[[orderHistoryCols.SubmittedDate、 'desc']]);このDOMの削除を防ぐには、別の列を最初にクリックする必要があります。 SubmittedDateをすぐにクリックして昇順にソートすると、DOMの削除の問題が発生します。どうして?また、テーブルの二重フリッカー(並べ替えやフィルタリングの際にちらつきが発生するので、この場合はレンダリングが2回しか発生しません) – Vahe

答えて

0

適切にするために単一の次元(サイズ= 1)アレイとして次のように最後の行に書き込む必要があります1つの列でソートするだけです。

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

私の元の質問の配列の配列には、二重括弧(開閉)がありました。

関連する問題