79327

Sorting ngTable doesn't work when heading gets clicked

Question:

I'm currently working on a table that requires some sorting. Since the project is using Angular (v1.2.12) I started using the <a href="http://bazalt-cms.com/ng-table/" rel="nofollow">ngTable</a> module (v0.3.2).

The default sorting is the title but the year can also be used as sorting option. When I load the page it works fine, but when I click a table heading the clicked column gets sorted but the sorting is not reflected in the header, also the sorting param is no longer set.

When I start debugging I see that the params.sorting() returns: <em>{title: undefined}</em> From that moment it also is no longer possible to click on a sortable header, it just doesn't do anything anymore.

I think I'm missing something, can't seem to find what though

My data is as follows:

[{ "year": 2014, "title": "Golden title" }, { "year": 2013, "title": "Golden title" }, { "year": 2013, "title": "Another title" }, { "year": 2014, "title": "Whetshoverwerd xsade aas" }, { "year": 2013, "title": "Another brilliant title" }, { "year": 2013, "title": "Wherever I may SOAP" }]

The view:

<table ng-table="tableParams" class="table"> <tbody> <tr ng-repeat="document in $data"> <td data-title="'Year'" sortable="'year'">{{document.year}}</td> <td data-title="'Title'" sortable="'title'"><a href="#">{{document.title}}</a></td> </tr> </tbody> </table>

The view is a directive,

angular.module('appDirectives').directive('myModuleDirective', function () { // Runs during compile return { restrict: 'E', templateUrl: 'path/to/view.html', replace: true, controller: function ($scope, $timeout, $filter, TitleList, ngTableParams) { $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 10, // count per page sorting: { title: 'asc' // initial sorting } }, { total: 0, // length of data getData: function ($defer, params) { TitleList.get({}, function (data) { var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; params.total(orderedData.length); orderedData = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); $defer.resolve(orderedData); }); } }); } };

Answer1:

The issue is not yet clear to me however, the examples at ngTable use v0.3.1 and I use v0.3.2. The issue was solved by starting to use the older version.

Answer2:

I've had this issue too, there might be some bugs in v0.3.2

I fixed this one by replacing line 502 in the ng-table code with this line:

var sortingParams = (event && (event.ctrlKey || event.metaKey)) ? $scope.params.sorting() : {};

I'm not sure this is the right fix (not sure why 'event' was undefined) but it fixed the problem for me. So please don't take this as a proper solution, it's just my 2 pence.

Answer3:

I've had this issue, it was a response format issue.<br /> The issue was because, I was returning an object instead of an array, ex:

Bad format:

{ "data": { "items": { "0": { "post_id": "26", "post_date": "2015-06-24 00:00:00"

Good Format:

{ "data": { "items": [ { "id": "26", "create_date": "2015-02-19 14:15:44",

The table works with an object as well, but NOT all of the functions.

Recommend

  • TSQL USE ROW_NUMBER IN CTE, SELECT ORDER BY NOT WORKING
  • How to define priority to load resources on the webpages?
  • Rails 5 create multiple child objects using parent object by the use of nested attributes
  • How to get next 2 nodes in HTML + HTMLAgilitypack
  • How do you mix up java with html and javascript?
  • Match sub-string within a string with tolerance of 1 character mismatch
  • Glassfish 5 will not start after enable-secure-admin command
  • Using XSL to get all tags before a tag with given contents occurs
  • Python: Cross-platform solution to detect physical non-HT CPUs?
  • Generating random non repeating number array in C++
  • Hash UUIDs without requiring ordering
  • Extending the attributes inspector in interface builder
  • How to import csv's with “occasional” quotes (R and / or Pandas)?
  • .htaccess HTTPS Main Domain & Wildcard HTTP Sub-Domains + All Non-WWW
  • How to load shared libraries symbols for remote source level debugging with gdb and gdbserver?
  • How to proxy a shell process in ruby
  • How do I determine the revision number of an Android build?
  • How to push ViewController with slide effect from left to right? Animation name required
  • Why is this jQuery reference '$(“”)' instead of '$(“”)'?
  • Returning from inside for loop causes type mismatch
  • How do i check if TcpClient is connected?
  • Does c# have a rspec like testing framework that makes grouping like tests together?
  • Add filename and length parameter to WCF stream when Transfermode = Stream
  • Change day number color on click - not background
  • Hibernate UserType and a defined length
  • Shut down the underlying Executor of ExecutorCoroutineDispatcher
  • wsContext.getMessageContext().get(MessageContext.SERVLET_REQUEST) returns null on Jetty?
  • Testing custom SOAP Headers in ASMX
  • Cannot convert a char value to money. The char value has incorrect syntax
  • Is there a chance to get -splash: work for SWT applications that require -XstartOnFirstThread?
  • include dlls in visual studio c++ 2008
  • R Split data.frame using a column that represents and on/off switch
  • Undefined references when compiling gSOAP client
  • Accessing IRQ description array within a module and displaying action names
  • Javascript Callbacks with Object constructor
  • Where to put my custom functions in Wordpress?
  • embed rChart in Markdown
  • How to get NHibernate ISession to cache entity not retrieved by primary key
  • How can I use `wmic` in a Windows PE script?
  • Unable to use reactive element in my shiny app