CODEWITHSUNDEEP
angularjssorting
Simple runner
Simple runner

Reputation: 445

Don't work sort in angular-tablesort

I try to work with angular-sortable, but maybe I made something wrong because this code doesn't work.Where my mistake? All thead clickable, but it does sorting data in the table, just change css styles on click. Maybe I wrote wrong ts-criteria or wrong work with data?
My table:

<table ts-wrapper>
                <thead>
                    <tr>
                        <th class="add">Add</th>
                        <th ts-criteria="population" ng-repeat="year in vm.years" ts-repeat>{{ year }}</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="city in vm.cities" ts-repeat>
                        <td >{{ city.name }}</td>
                        <td ng-repeat="population in city.population">{{ population }}</td>
                    </tr>
                </tbody>
            </table>

This is my controller:

(function  () {
    'use strict';
    var app = angular.module("app",['tableSort']);

    app.controller("TableController", TableController);

    function TableController () {
        var vm = this;
        vm.years = ['2005', '2006', '2007', '2008', '2009', '2010', '2011', '2012', '2013', '2014'];
        vm.cities = [
            {
                "name":"Москва",
                'population':{
                    '2005': '7000000',
                    '2006':'7300000',
                    '2007':'7800000',
                    '2008':'8000000',
                    '2009':'8400000',
                    '2010':'8700000',
                    '2011':'9000000',
                    '2012':'9400000',
                    '2013':'9800000',
                    '2014':'10000000'
                }
            },
            {
                "name":"Санкт-Петербург",
                'population':{
                    '2005':'6000000',
                    '2006':'6300000',
                    '2007':'6800000',
                    '2008':'7000000',
                    '2009':'7400000',
                    '2010':'7700000',
                    '2011':'8000000',
                    '2012':'8400000',
                    '2013':'8800000',
                    '2014':'9000000'
                }
            },
            {
                "name":"Калининград",
                'population':{
                    '2005':'2000000',
                    '2006':'2300000',
                    '2007':'2800000',
                    '2008':'3000000',
                    '2009':'3400000',
                    '2010':'3700000',
                    '2011':'4000000',
                    '2012':'4400000',
                    '2013':'4800000',
                    '2014':'4900000'
                }
            },
            {
                "name":"Архангельск",
                'population':{
                    '2005':'295000',
                    '2006':'300000',
                    '2007':'305000',
                    '2008':'308000',
                    '2009':'310000',
                    '2010':'315000',
                    '2011':'318000',
                    '2012':'324000',
                    '2013':'331000',
                    '2014':'341000'
                }
            },
            {
                "name":"Астрахань",
                'population':{
                    '2005':'493000',
                    '2006':'497000',
                    '2007':'499000',
                    '2008':'502000',
                    '2009':'504000',
                    '2010':'507000',
                    '2011':'509000',
                    '2012':'513000',
                    '2013':'514000',
                    '2014':'520000'
                }
            },
            {
                "name":"Уфа",
                'population':{
                    '2005':'1028000',
                    '2006':'1034000',
                    '2007':'1036000',
                    '2008':'1038000',
                    '2009':'1042000',
                    '2010':'1047000',
                    '2011':'1051000',
                    '2012':'1054000',
                    '2013':'1059000',
                    '2014':'1062000'
                }
            },
            {
                "name":"Белгород",
                'population':{
                    '2005':'318000',
                    '2006':'321000',
                    '2007':'330000',
                    '2008':'333000',
                    '2009':'339000',
                    '2010':'342000',
                    '2011':'345000',
                    '2012':'350000',
                    '2013':'354000',
                    '2014':'356000'
                }
            },
            {
                "name":"Брянск",
                'population':{
                    '2005':'381000',
                    '2006':'384000',
                    '2007':'390000',
                    '2008':'394000',
                    '2009':'397000',
                    '2010':'400000',
                    '2011':'402000',
                    '2012':'404000',
                    '2013':'413000',
                    '2014':'415000'
                }
            },
            {
                "name":"Улан-Удэ",
                'population':{
                    '2005':'370000',
                    '2006':'372000',
                    '2007':'375000',
                    '2008':'379000',
                    '2009':'384000',
                    '2010':'391000',
                    '2011':'396000',
                    '2012':'397000',
                    '2013':'400000',
                    '2014':'404000'
                }
            },
            {
                "name":"Волгоград",
                'population':{
                    '2005':'991000',
                    '2006':'995000',
                    '2007':'999000',
                    '2008':'1001000',
                    '2009':'1004000',
                    '2010':'1010000',
                    '2011':'1012000',
                    '2012':'1015000',
                    '2013':'1019000',
                    '2014':'1021000'
                }
            },
        ];
    }
}());

Upvotes: 0

Views: 1594

Answers (1)

Jesper We
Jesper We

Reputation: 6097

[Answer updated to match your fiddle]

There are many many problems:

  • The worst is that the tablesorter does not handle criteria columns with names that are numeric (such as a year). So they need to be parseable only as strings. Like "y2010" for example.

  • The ts-criteria="population['year']" thing doesn't work. There is no such array.

  • It doesn't seem to like your "track by" directives.

  • It doesn't like ng-repeats in the data columns either, so I had to take out the population sub-object.

  • Also you are not specifying a filter for the ts-criteria, which will screw up your sorting since the population numbers will be sorted as Strings ("900" > "10000" for example....).

So basically tablesorter will only work if you follow the example code really close :-). Unless you start fixing those problems. There is a fiddle at http://jsfiddle.net/o15bLvb2/2/ which makes all of this work.

Your body becomes:

<body ng-app="app" ng-controller="TableController as vm">
        <table  cellpadding="10" cellspacing="10" ts-wrapper >
            <thead>
                <tr>
                    <th class="add" ts-criteria="add" ts-default>Add</th>
                    <th ts-criteria="y2005|parseInt">y2005</th>
                    <th ts-criteria="y2006|parseInt">y2006</th>
                    <th ts-criteria="y2007|parseInt">y2007</th>
                    <th ts-criteria="y2008|parseInt">y2008</th>
                    <th ts-criteria="y2009|parseInt">y2009</th>
                    <th ts-criteria="y2010|parseInt">y2010</th>
                    <th ts-criteria="y2011|parseInt">y2011</th>
                    <th ts-criteria="y2012|parseInt">y2012</th>
                    <th ts-criteria="y2013|parseInt">y2013</th>
                    <th ts-criteria="y2014|parseInt">y2014</th>
                </tr>
            </thead>
            <tbody>
                <tr ng-repeat="city in vm.cities track by city.name" ts-repeat>
                    <td>{{ city.name }}</td>
                    <td>{{ city.y2005 }}</td>
                    <td>{{ city.y2006 }}</td>
                    <td>{{ city.y2007 }}</td>
                    <td>{{ city.y2008 }}</td>
                    <td>{{ city.y2009 }}</td>
                    <td>{{ city.y2010 }}</td>
                    <td>{{ city.y2011 }}</td>
                    <td>{{ city.y2012 }}</td>
                    <td>{{ city.y2013 }}</td>
                    <td>{{ city.y2014 }}</td>
                </tr>
            </tbody>
        </table>
    </body>

Upvotes: 1

Related Questions