jquery datatables重新加載角度的數據

使用jQuery datatables library，我能夠實現數據表。在我的控制器中，我已初始化數據表。表格用戶界面工作正常。但是，當我從我的API獲取新數據時，我的數據顯示在表格的下方，而不是在數據表中顯示。這是因爲datatable不重新加載。我試圖重新加載數據表，但沒有運氣，它不適用於我。jquery datatables重新加載角度的數據

控制器

// When the search button clicked 
$scope.search = function(){ 
    var newData = [{..}]; 
    $scope.news = newData; 
} 

// Datatable init 
jQuery('.js-dataTable-simple').dataTable({ 
    columnDefs: [ { orderable: false, targets: [ 4 ] } ], 
    pageLength: 10, 
    lengthMenu: [[5, 10, 15, 20], [5, 10, 15, 20]], 
    searching: false, 
    oLanguage: { 
    sLengthMenu: "" 
    }, 
    dom: 
    "<'row'<'col-sm-12'tr>>" + 
    "<'row'<'col-sm-6'i><'col-sm-6'p>>" 
});

HTML

<table class="table table-bordered table-striped js-dataTable-simple"> 
    <thead> 
    <tr> 
     <th class="text-center"></th> 
     <th>Title</th> 
     <th class="hidden-xs">Source</th> 
     <th style="width: 15%;" class="hidden-xs">Date</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr ng-repeat="n in news" ng-show="isSearch == true"> 
     <td class="text-center">{{ $index }}</td> 
     <td class="font-w600">{{ n.title }}</td> 
     <td class="hidden-xs">{{ n.source }}</td> 
     <td class="hidden-xs">{{ n.selected_date | date: 'MMM d, y h:mm a' }}</td> 
    </tr> 
    </tbody> 
</table>

來源

2017-06-24 Abel Chun

如果你想完全AngularJS使用數據表插件，我會建議你使用AngularJS datatable plugin

這是非常有用並易於使用，因爲它是一個指令，你可以con通過一個物體來描繪它。此外，您還可以使用NG-重複如The Angular way

如果你仍然想使用的數據表，只需使用AJAX就像我在我的項目做（datatables.net是有用的種源在那裏你可以找到你的答案）：

ajax: function (data, callback, settings) { 
      var pageSize = settings._iDisplayLength; 
      var pageNumber = settings._iDisplayStart/pageSize; 

      if (settings.aaSorting.length > 0) { 
      var sortCol = settings.aaSorting[0][0]; 
      var sortType = (settings.aaSorting[0][1] == "asc") ? 0 : 1; 
      var sortBy = settings.aoColumns[sortCol].data; 
      } 
      var params = { 
      page: pageNumber, 
      size: pageSize, 
      sortBy: sortBy, 
      sortType: sortType 
      }; 

      $element.find(".filter-region [filter]").each(function (index, e) { 

      if ($(e).val() != "" && $(e).val() != null) 
       params[$(e).attr("filter")] = $(e).val().trim(); 
      }); 
      var resource = ""; 
      if ($scope.dataTableConfig.noPgnresource) 
      // used in case api returns just a list and not paginating 
      resource = $scope.dataTableConfig.noPgnresource; 
      else 
       resource = $scope.dataTableConfig.resource; 
      if ($scope.dataTableConfig.getParams) { 
       params = Object.assign(params, $scope.dataTableConfig.getParams) 
      } 
      APIGateway.sendRequest(resource + ".GET", params).then(function (resp) { 
      if ($scope.dataTableConfig.isInlineEdit) { 
       settings.isInlineEdit = true; 
       if ($scope.dataTableConfig.noPgnresource) 
       resp.data = $scope.dataTableConfig.inlineForm.concat(resp); 
       else 
       resp.data = $scope.dataTableConfig.inlineForm.concat(resp.content); 
      } 
      else { 
       resp.data = resp.content; 
      } 
      resp.recordsFiltered = resp.totalElements; 
      resp.recordsTotal = resp.totalElements; 
      callback(resp); 
      }, function (resp) { 
      toastr.error(tableTitles.errorMessage); 
      }); 
     }, 

     language: { 
      "lengthMenu": "_MENU_", 
      "info": tableTitles.total + " _TOTAL_ " + tableTitles.record, 
      "infoEmpty": tableTitles.empty, 
      "emptyTable": tableTitles.empty, 
      "infoFiltered": tableTitles.infoFilter + " _MAX_ " + tableTitles.record, 
      "zeroRecords": tableTitles.zeroRecords, 
     }, 
     nameElementSuff: "-table", 
     stateSave: true, 
     processing: true, 
     serverSide: true,

來源

2017-06-24 08:30:33 WhiteDragon

jquery datatables重新加載角度的數據

回答

相關問題