jQuery Tablesorter w/ Pager plugin preloading images

Question

I am using the TableSorter jQuery plugin with associated Pager plugin as well. I am having MySql query results displayed in this table. The thing is, after I retrieve a rating result from the query, I use this value to display a 5 star rating using a Starrating jQuery plugin. The issue is that I am having trouble designing a parser to be able to sort by rating as well as having issues with the stars preloading. I mean that since there are pages involved and ability to change amount of results displayed, the "hidden" results do NOT load the stars. So if I change amount of results displayed or traverse to another page, only radio buttons are displayed instead of the star images. Can someone please assist me in getting the images to either preload for ALL results or discover a way to get the images to display another way?? This is a very pressing issue holding up the completion of a project so ANY help is appreciated.

Thanks!!

Answer 1

The problem is that the pager plugin rebuilds the entire table from its cached data, so that's why all you see are radio buttons when changing pages.

I've recently forked a copy of the tablesorter plugin on github and I've actually included some triggered events for the pager plugin. If you look at the pager demo page, you'll see the triggered events display across the top. All you need to do then is to reapply the stars plugin when the "pagerComplete" event occurs. Something like this:

$('table').bind('pagerComplete', function(){ 
  // reapply the stars plugin
  $(this).stars();
});