Angular-Datatables - 如何使用默认设置对表进行排序？

I am creating a plunker for another question but I cannot get angular-datatables to sort without configuration.

我正在为另一个问题创建一个plunker但我无法在没有配置的情况下对angular-datatables进行排序。

I have code from a project that responds to sorting when users click on header columns but it just does not want to sort in plunkr.

我有一个项目的代码,当用户点击标题列时它会响应排序,但它只是不想在plunkr中排序。

Am I missing any sort of configuration or overlooking anything?

我错过了任何配置或忽略任何东西吗?

How do I make the table sortable using default settings?

如何使用默认设置使表格可排序?

Plunkr

https://plnkr.co/edit/71RqBQ0HF7ThDyZPpc1E?p=info

HTML

<!DOCTYPE html>
<html>

<head>
  <link data-require="datatables@1.9.4" data-semver="1.9.4" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.css" />
<script data-require="jquery@1.10.1" data-semver="1.10.1" src="//code.jquery.com/jquery-1.10.1.min.js"></script>
  <script data-require="datatables@1.9.4" data-semver="1.9.4" src="//cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/jquery.dataTables.js"></script>
  <script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="//code.angularjs.org/1.2.15/angular.js"></script>
  <script type="text/javascript" src="//rawgithub.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="datatablesSampleApp">
  <div ng-controller="simpleCtrl">
  <div class="table-responsive">
      <table  datatable="ng" class="table" >
              <thead style="background-color: #d8d8d8;">
               <tr>
                   <th>Product</th>
                   <th>Tag Name</th>
                   <th>Unit Size</th>
                   <th>Unit Cost</th>
               </tr>
              </thead>
           <tbody>
                    <tr style="font-weight: 100;" ng-repeat="data in items | filter:{ TagName: filterTag, TagId: filterId} | filter:searchText" >
                    <td class="td-line-height" style="font-weight: 600;';">{{data.Product}}</td>
                    <td class="td-line-height">{{data.TagName}} </td>
                    <td class="td-line-height">{{data.UnitSize}} </td>
                    <td class="td-line-height">{{data.UnitCost | currency}} </td>
                  </tr>
           </tbody>
       </table>
       </div>
  </div>
</body>

</html>

1 个解决方案

#1

for some reason angular-datatables.js is calling isDataTable function while jquery.dataTables.js defines this function as fnIsDataTable, so, to solve it, just add

由于某种原因,angular-datatables.js正在调用isDataTable函数,而jquery.dataTables.js将此函数定义为fnIsDataTable,因此,要解决它,只需添加

$.fn.dataTable.isDataTable = $.fn.dataTable.fnIsDataTable;

as your first line in your controller.

作为你控制器的第一行。

here is the error message:

这是错误消息:

VM892 angular.js:9563TypeError: $.fn.dataTable.isDataTable is not a function
  at Object.renderDataTable (VM1134 angular-datatables.js:753)
  at Object.hideLoadingAndRenderDataTable (VM1134 angular-datatables.js:773)
  at VM1134 angular-datatables.js:910
  at VM892 angular.js:13777
  at completeOutstandingRequest (VM892 angular.js:4236)
  at VM892 angular.js:4537

updated plunker: https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p=preview

更新的plunker:https://plnkr.co/edit/TgpWLuiTDbb91yJeHYoX?p = preview

#1