angularjs - ngTable not sorting

Question

im using ngTable. Sorting is not working.

Pagination works nice and it shows all my data as I need. But I can't sort.

I'm using $data (I dont know what is for) but still can't sort.

My html:

<div class="panel-heading">
  <table ng-table="vm.tableParams">
    <tbody>
      <tr ng-repeat="event in $data">
        <td data-title="'Nombre'" sortable="'name'">  {{ event.phone ? "Tex1" : Text2 }}</td>
        <td data-title="'Dia Entero'" sortable="'entero'">{{ event.allDay ? '√' : 'X'  }}</td>
        <td data-title="'F. Inicio'" sortable="'inicio'">{{ event.start | date:'dd-MM-yyyy' }}</td>
        <td data-title="'F. Fin'" sortable="'fin'">   {{ event.end | date:'dd-MM-yyyy' }}</td>
        <td data-title="'Telf.'" sortable="'telf'">  {{ event.phone ? event.phone : '--' }}</td>
      </tr>
    </tbody>
  </table>
</div>

My js:

   // My data
   [{  
      "title":"Cerrado",
      "start":"2015-12-24T23:00:00.000Z",
      "allDay":true,
      "backgroundColor":"#f05050",
      "borderColor":"#f05050"
   },
   {  
      "title":"Abierto",
      "start":"2016-04-10T04:00:00.000Z",
      "end":"2016-04-10T08:00:00.000Z",
      "backgroundColor":"#43d967",
      "borderColor":"#43d967"
   },
   {  
      "title":"Mi Guardia",
      "start":"2015-12-24T01:00:00.000Z",
      "end":"2015-12-24T08:00:00.000Z",
      "backgroundColor":"#5d9cec",
      "borderColor":"#5d9cec"
   },
   {  
      "title":"super farmacias",
      "phone":"677889966",
      "address":"Calle badajoz 200",
      "start":"2016-01-06T02:00:00.000Z",
      "end":"2016-01-06T09:00:00.000Z",
      "backgroundColor":"#dde6e9",
      "borderColor":"#dde6e9",
      "textColor":"#555"
   }]

var data = vm.events;

vm.tableParams = new ngTableParams({
  page: 1,        // show first page
  count: 8,        // count per page
  sorting: {
    name: 'asc'
  }
},
{
  total: data.length,
  counts: [],
  getData: function($defer, params) {
    // use build-in angular filter
    var orderedData = params.sorting() ?
      $filter('orderBy')(data, params.orderBy()) :
      data;

    $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
  }
});

I have been trying for 2 hours with a lot of examples and changing $data for vm.values and creating other variables and stuffs.

Any idea why sort is broken?

Thanks

What does the data look like? Can you post it ?

Shaohao
– Shaohao

2015-12-17 18:47:32 +00:00
Commented Dec 17, 2015 at 18:47 — Shaohao
– Shaohao, Commented Dec 17, 2015 at 18:47
Yes, i will. give me a second.

Baumannzone
– Baumannzone

2015-12-17 18:49:41 +00:00
Commented Dec 17, 2015 at 18:49 — Baumannzone
– Baumannzone, Commented Dec 17, 2015 at 18:49

Shaohao · Accepted Answer · 2015-12-17 18:59:28Z

1

After checking your data, you have to modified the HTML code sortable = the object key. Because when you sort some data in the table using ng-table, it is based on what data is displaying in the table.
In this case, it will be the data you just posted. And in your data, you don't have a field called name, entero and etc. Therefore, the sort function is not working for you.

 <tr ng-repeat="event in $data">
    <td data-title="'Nombre'" sortable="'title'">  {{ event.phone ? "Tex1" : Text2 }}</td>
    <td data-title="'Dia Entero'" sortable="'allDay'">{{ event.allDay ? '√' : 'X'  }}</td>
    <td data-title="'F. Inicio'" sortable="'start'">{{ event.start | date:'dd-MM-yyyy' }}</td>
    ...
 </tr>

edited Dec 17, 2015 at 18:59

answered Dec 17, 2015 at 18:55

Shaohao

3,5297 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Baumannzone Over a year ago

Thanks you very much. Wasted 2h trying to figure why not working. I feel so dumb now. Thats the reason. I thought I could call it as I want, and in my controller call as I 'named' it.

Shaohao Over a year ago

All that matter is the code is working! Enjoy hacking.

Ashokprakash · Accepted Answer · 2015-12-17 18:46:39Z

1

Usually for sorting, reverseSort feature is handy, Please try this to sort

<th><a href="#" ng-click="orderByField='fieldName'; reverseSort=!reverseSort">Field Name</a></th>

answered Dec 17, 2015 at 18:46

Ashokprakash

231 silver badge9 bronze badges

1 Comment

Baumannzone Over a year ago

Hello, thanks for your time. But the result was easier than your code.

Collectives™ on Stack Overflow

angularjs - ngTable not sorting

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related