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 ngTable 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: {title: undefined} 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);
                    });
                }
            });
        }
    };

Wulfe

Answer 1

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.

Wulfe

so you went from 0.3.2 to 0.3.1 and it works? I am using 0.3.2 also the table data loads fine, however, clicking the header does nothing to sort. I am loading the table data dynamically. – Yvonneyvonner

Answer 2

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.

Homophony

Answer 3

I've had this issue, it was a response format issue.
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.

Bales