Javascript jquery数据表以角度重新加载数据

Javascript jquery数据表以角度重新加载数据,javascript,jquery,angularjs,datatable,Javascript,Jquery,Angularjs,Datatable,使用,我能够实现datatable。在我的控制器中,我初始化了数据表。表UI工作正常。但是,当我从API中获得新数据时,我的数据会在表下以ng重复显示,而不是在datatable中显示。这是因为datatable未重新加载。我曾尝试重新加载数据表,但运气不好,对我不起作用 控制器 // When the search button clicked $scope.search = function(){ var newData = [{..}]; $scope.news = newData

使用,我能够实现datatable。在我的控制器中,我初始化了数据表。表UI工作正常。但是,当我从API中获得新数据时,我的数据会在表下以ng重复显示,而不是在datatable中显示。这是因为datatable未重新加载。我曾尝试重新加载数据表,但运气不好,对我不起作用

控制器

// 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>>"
});
//单击搜索按钮时
$scope.search=函数(){
var newData=[{..}];
$scope.news=newData;
}
//数据表初始化
jQuery('.js dataTable simple').dataTable({
columnDefs:[{orderable:false,目标:[4]}],
页长:10,
长度菜单:[[5,10,15,20],[5,10,15,20],
搜索:假,
语言:{
长菜单:“
},
dom:
"" +
""
});
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>

标题
来源
日期
{{$index}}
{{n.title}}
{{n.source}}
{{n.selected{u date}date:'mmmd,yh:mma'}

如果您想完全使用AngularJS来使用datatable插件,我建议您使用

它非常有用且易于使用,因为它是一个指令,您可以通过对象对其进行配置。此外,您还可以使用ng repeat,例如

如果您仍然想使用datatable,只需像我在项目中那样使用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,