Search code examples
jqueryangularjssortingtablesorter

columns in tables - Angular JS


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>

Solution

  • 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