jquery数据表在Angular中重新加载数据答案

【问题标题】：jquery datatables reload data in Angularjquery数据表在Angular中重新加载数据
【发布时间】：2017-06-24 06:09:47
【问题描述】：

使用jQuery datatables library，我能够实现数据表。在我的控制器中，我已经初始化了数据表。表格 UI 工作正常。但是当我从我的 API 获取新数据时，我的数据显示在表格下方，使用 ng-repeat 而不是显示在数据表中。这是因为数据表没有重新加载。我曾尝试重新加载数据表，但没有运气，它对我不起作用。

控制器

// 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>

【问题讨论】：

标签： javascript jquery angularjs datatable

【解决方案1】：

如果你想完全通过 AngularJS 使用数据表插件，我建议你使用AngularJS datatable plugin

它非常有用且易于使用，因为它是一个指令，您可以通过对象对其进行配置。另外，您可以使用 ng-repeat，例如 The Angular way

如果您仍然想使用 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,

【讨论】：