columns in tables - Angular JS

Question

I've created an application in angular js for columns and rows generation table using angular-js and for sorting the table i'm using tablesorter.js plugin. The application works fine but the problem is that in the application there are four columns which are been displayed based on the users preferences, say after the table is been displayed initially the sorting works properly but when the changes are been done to the columns the sorting is not working for the new columns

In the below code I've made up a mock demo regarding the application here initially the sorting works properly but when changeDisplay button is clicked and when new two columns are displayed the sorting are not been applied to those new columns (Service One, Service Two)

Can anyone please tell me some solution for this

JS-Fiddle

html

<div ng-controller="Controller">
    <table border="1" id="mytable">
      <thead>
        <tr>
          <th>Work Name</th>
          <th>Team Name</th>
          <th>Place Name</th>
          <th ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{servopt.servicename}}</th>
          <th>Leader Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="val in datas">
          <td>{{val.workname}}</td>
          <td>{{val.teamname}}</td>
          <td>{{val.placename}}</td>
          <td ng-repeat="servopt in services|filter:{ display: 'block' }|orderBy:'order'">{{val[servopt.serviceid]}}</td>
          <td>{{val.leadername}}</td>
        </tr>
      </tbody>
    </table>
    <button ng-click="changeDisplay()">changeDisplay</button>
  </div>

Answer 1

With the fork of tablesorter you are using, you can trigger an updateAll method to reinitialize tablesorter after any column data has changed (demo).

setTimeout(function(){
    // updateAll include the header in the update
    $('#mytable').trigger('updateAll');
}, 100);

Now I don't know anything about angular js, so the above code would work better if it was executed inside of a callback instead of inside of a setTimeout function

Answer 2

The problem is that tablesorter plugin does not play properly with dynamic columns. In other words, even if you remove all Angular code and try creating new columns for a table and refreshing trablesorter, it will not work.

In that case, you want to look for a alternative plugin, or maybe a Angular only solution (take a look at the examples).

As a second point, you never touch the DOM from inside a controller:

Do not use controllers to:

• Manipulate DOM — Controllers should contain only business logic. Putting any presentation logic into Controllers significantly affects its testability. Angular has databinding for most cases and directives to encapsulate manual DOM manipulation.

Use a directive for that purpose.

EDIT:

As per @Mottie's answer, you can trigger a updateAll event on the table, but you need to wait for Angular digest to run and update the DOM, so you need the setTimeout.

You should still move all the logic that touches the DOM to a directive.