Vahe Vahe - 1 year ago 105
AngularJS Question

Angular-Datatables - How do I make table sortable using default settings?

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

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.

Am I missing any sort of configuration or overlooking anything?

How do I make the table sortable using default settings?



<!DOCTYPE html>

<link data-require="datatables@1.9.4" data-semver="1.9.4" rel="stylesheet" href="//" />
<script data-require="jquery@1.10.1" data-semver="1.10.1" src="//"></script>
<script data-require="datatables@1.9.4" data-semver="1.9.4" src="//"></script>
<script type="text/javascript" data-require="angular.js@1.2.15" data-semver="1.2.15" src="//"></script>
<script type="text/javascript" src="//"></script>
<script src="script.js"></script>

<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl">
<div class="table-responsive">
<table datatable="ng" class="table" >
<thead style="background-color: #d8d8d8;">
<th>Tag Name</th>
<th>Unit Size</th>
<th>Unit Cost</th>
<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>


Answer Source

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

$.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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download