Question

This seems to be a little hard to explain, but I will try my level best.

I have used jquery tablesorter for paging. working fine.
Actually I have a list of songs and by default first song plays at page load.

The TR of the song become active by custom jquery function which turns the class (classname = current_playing) so as to show that this song is playing. working fine.

when I click on other song (other TR) then the previous song is made inactive and the TR’s Class(current_playing) is removed which is obvious.

Code

 $('.tablesorter tr').removeClass('current_playing');

Problem

When I go to second page using tablesorter and then click on other tr of second page then it does not remove previous tr class which I selected in the previous page.

I have some idea that this is causing because may be above code is not finding the TR in the page.

Please help how can I remove previous class. I hope I tried my best to explain but still you can see it at http://webcartz.stagetesting.com/playlist

Thanks

Answer 1

After googling and properly studying the doc of tablesorter, I was successful in finding the solution. In tablesorter we have $(“.tablesorter”)[0].config.rowsCopy which gives all the table rows and using this you can easily use your custom code .

  $($(".tablesorter")[0].config.rowsCopy).each(function() {
     // for removing tr class 
     $(this).removeClass('current_playing');
     // for changing class another div 
     $(this).find('div.black_speaker').removeClass('black_speaker');
  });

Hope this help somebody who is having the same problem.