0

I am using angularjs ng-table module. I would like to make a table sortable by clicking the heading. Here is the relevant html code.

<div ng-controller="ViewCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
        <thead>

        <tr>
            <th>name</th>            
            <th>changeInPercent</th>
            <th>Ratio</th>
        </tr>

        <thead>
        <tbody>
        <tr ng-repeat="stk in $data">
            <td data-title="'name'" filter="{ name: 'text'}" sortable="'name'" " >
                {{stk.name}}
            </td>
            <td data-title="'changeInPercent'" >
                {{stk.changeInPercent}}
            </td>
            <td data-title="'Ratio'" >
                {{stk.Ratio}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

The relevant controller code looks like this;

.controller('ViewCtrl', ['$scope', '$http', 'configuration', 'ngTableParams',
    function ($scope, $http, $configuration, ngTableParams) {
        var tableData = [];
        //Table configuration
        $scope.tableParams = new ngTableParams({
            page: 1,
            count: 100
        }, {
            total: tableData.length,
            //Returns the data for rendering
            getData: function ($defer, params) {                    
                var url = $configuration.webroot + '/fsa/list?list=XXlist';
                $http.get(url).then(function (response) {
                    tableData = response.data;
                    $defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                    params.total(tableData.length);
                });
            }
        });
    }])

The table data is displayed correctly. I expect the name column to be sortable by clicking on it. However, the name column remains unsortable. What is wrong with the code?

||||||
  • Can you provide sample data and/or a working jsFiddle ? – Derlin Jan 23 '16 at 12:06
  • @Shitsu, the data is retrieved from a REST API server. Hard to provide a working jsFiddle. However, I have provided the relevant controller code. Thanks. – user781486 Jan 23 '16 at 12:13
2

Finally got it !

Just remove the thead element. It will be constructed automatically with the titles you mention in the data-title attributes.

Edit: here is a JsFiddle. You will probably need to add some processing in the getData, as in this snippet:

$scope.tableParams = new ngTableParams({
  // ...
}, {
  // ...
  getData: function($defer, params) {
    // apply sorting and such 
    $scope.tableData = params.sorting() ? $filter('orderBy')($scope.tableData, params.orderBy()) : $scope.tableData;
    $scope.tableData = params.filter() ? $filter('filter')($scope.tableData, params.filter()) : $scope.tableData;
    $scope.tableData = $scope.tableData.slice((params.page() - 1) * params.count(), params.page() * params.count());
    $defer.resolve($scope.tableData);
  }
});

Hope this helps.

||||||
  • Thanks for helping. Upvoted. I removed the thead. However, it did not work in my case. I suspect the problem may lie in the controller. From this tutorial 4dev.tech/2015/08/…, something like params.sorting() needs to be added. – user781486 Jan 23 '16 at 12:45
  • 1
    In your JSfiddle, this line $scope.tableData = params.sorting() ? $filter('orderBy')($scope.tableData, params.orderBy()) : $scope.users; puzzles me. It seems that $scope.users can be anything. If I replace this line with $scope.tableData = params.sorting() ? $filter('orderBy')($scope.tableData, params.orderBy()) : ''; , the code will still work. – user781486 Jan 23 '16 at 13:41
  • But your previous answer is not wrong. The code still works no matter what the value. This is what puzzles me. – user781486 Jan 23 '16 at 13:45
  • 1
    It works because in our case, params.sorting() is always true. Try to remove the sortable attribute and it should crash ^^. – Derlin Jan 23 '16 at 14:01
  • Would it be more "correct" if we use this line $scope.tableData = params.sorting() ? $filter('orderBy')($scope.tableData, params.orderBy()) : $scope.tableData, 0 to give some dummy result in case params.sorting() is false? – user781486 Jan 24 '16 at 0:52
2

You don't close the td properly:

 <td data-title="'name'" filter="{ name: 'text'}" sortable="'name'">
||||||
  • Sorry, I checked my original code. I did close the tag properly. Did not copy the code over to StackOverflow properly. My careless fault. I have edited the question to cover the mistake. – user781486 Jan 23 '16 at 12:05
0

There are errors in both your html and controller code.

Remove thead and tr elements from the html code;

<div ng-controller="ViewCtrl" class="container">
    <table ng-table="tableParams" class="table table-bordered">
        <tbody>
        <tr ng-repeat="stk in $data">
            <td data-title="'name'" filter="{ name: 'text'}" sortable="'name'" " >
                {{stk.name}}
            </td>
            <td data-title="'changeInPercent'" >
                {{stk.changeInPercent}}
            </td>
            <td data-title="'Ratio'" >
                {{stk.Ratio}}
            </td>
        </tr>
        </tbody>
    </table>
</div>

Add params.sorting() to the controller code.

.controller('ViewCtrl', ['$scope', '$http', 'configuration', 'ngTableParams',
    function ($scope, $http, $configuration, ngTableParams) {
        var tableData = [];
        //Table configuration
        $scope.tableParams = new ngTableParams({
            page: 1,
            count: 100
        }, {
            total: tableData.length,
            //Returns the data for rendering
            getData: function ($defer, params) {                    
                var url = $configuration.webroot + '/fsa/list?list=XXlist';
                $http.get(url).then(function (response) {
                    tableData = response.data;
                    tableData = params.sorting() ? $filter('orderBy')(tableData, params.orderBy()) : tableData;
                    tableData = tableData.slice((params.page() - 1) * params.count(), params.page() * params.count());   
                    $defer.resolve(tableData);
                    params.total(tableData.length);
                });
            }
        });
    }])
||||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.