I working on a survey display using bar-rating. i intend to put them in a table such that each bar-rating pairwise comparison is on one row. therefore using pagination from tablesorter to display each row at a time. below is my html and JavaScript code.
<script src='http://tablesorter.com/jquery-latest.js' type='text/javascript'></script>
<script src='http://tablesorter.com/__jquery.tablesorter.min.js' type='text/javascript'></script>
<script src="http://mottie.github.io/tablesorter/js/jquery.tablesorter.widgets.js"></script>
<script src="http://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.js"></script>
<script src='../../js/jquery-2.1.1.js' type='text/javascript'></script>
<script type='text/javascript' src='../../js/app_processor.js'></script>
<script src='../../js/jquery.barrating.js' type='text/javascript'></script>
<link rel="stylesheet" href="http://mottie.github.io/tablesorter/addons/pager/jquery.tablesorter.pager.css"/>
<link rel='stylesheet' type='text/css' href='../../css/tabs.css' />
<script language='JavaScript' type='text/javascript'>
$.noConflict();
jQuery(document).ready(function ()
{
jQuery('table').tablesorter({
theme: 'bootstrap',
widgets: ["zebra"]
}).tablesorterPager({
container: jQuery("#pager"),
savePages: false,
output: '{startRow} to {endRow} ({totalRows})',
size: 1
});
});
</script>
<!-- pager -->
<div id="pager">
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/first.png" class="first"/>
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/prev.png" class="prev"/>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/next.png" class="next"/>
<img src="http://mottie.github.com/tablesorter/addons/pager/icons/last.png" class="last"/>
<select class="pagesize" title="Select page size">
<option selected="selected" value="1">1</option>
<option value="10">10</option>
<option value="30">30</option>
<option value="40">40</option>
</select>
<select class="gotoPage" title="Select page number"></select>
<table width='100%' border='0' cellspacing='0' cellpadding='5' id='thetable' class="tablesorter">
<thead>
<tr>
<th></th>
</tr>
</thead>
<tr>
<td>
<div class='ratingDiver'>
<label class='ratingLabelLeft' style='float: left;'>asswwwwwwwwuuuuuuuu</label><div class='rating-c'>
<select class='weightRating-a' name='left_asswwwwwwwwuuuuuuuu' id='leftWeightid_0'>
<option value=''></option>
<option value='8'>9</option>
<option value='7'>8</option>
<option value='6'>7</option>
<option value='5'>6</option>
<option value='4'>5</option>
<option value='3'>4</option>
<option value='2'>3</option>
<option value='1'>2</option>
</select>
<select class='weightRating-b' name='center_asswwwwwwwwuuuuuuuu' id='centerWeightid_0'>
<option value='0'>1</option>
</select>
<select class='weightRating-c' name='right_asswwwwwwwwuuuuuuuu' id='rightWeightid_0'>
<option value=''></option>
<option value='1'>2</option>
<option value='2'>3</option>
<option value='3'>4</option>
<option value='4'>5</option>
<option value='5'>6</option>
<option value='6'>7</option>
<option value='7'>8</option>
<option value='8'>9</option>
</select>
</div><label class='ratingLabelRight'>
Awwwwwwww55555555555</label></div>
</td></tr><tr><td><div class='ratingDiver'><label class='ratingLabelLeft' style='float: left;'>asswwwwwwwwuuuuuuuu</label><div class='rating-c'>
<select class='weightRating-a' name='left_asswwwwwwwwuuuuuuuu' id='leftWeightid_1'>
<option value=''></option>
<option value='8'>9</option>
<option value='7'>8</option>
<option value='6'>7</option>
<option value='5'>6</option>
<option value='4'>5</option>
<option value='3'>4</option>
<option value='2'>3</option>
<option value='1'>2</option>
</select>
<select class='weightRating-b' name='center_asswwwwwwwwuuuuuuuu' id='centerWeightid_1'>
<option value='0'>1</option>
</select>
<select class='weightRating-c' name='right_asswwwwwwwwuuuuuuuu' id='rightWeightid_1'>
<option value=''></option>
<option value='1'>2</option>
<option value='2'>3</option>
<option value='3'>4</option>
<option value='4'>5</option>
<option value='5'>6</option>
<option value='6'>7</option>
<option value='7'>8</option>
<option value='8'>9</option>
</select>
</div><label class='ratingLabelRight'>
DDwwwwwwwoooouuuuuuu</label></div>
</td>
</tr>
<tr>
<td>
<div class='ratingDiver'><label class='ratingLabelLeft' style='float: left;'>asswwwwwwwwuuuuuuuu</label><div class='rating-c'>
<select class='weightRating-a' name='left_asswwwwwwwwuuuuuuuu' id='leftWeightid_2'>
<option value=''></option>
<option value='8'>9</option>
<option value='7'>8</option>
<option value='6'>7</option>
<option value='5'>6</option>
<option value='4'>5</option>
<option value='3'>4</option>
<option value='2'>3</option>
<option value='1'>2</option>
</select>
<select class='weightRating-b' name='center_asswwwwwwwwuuuuuuuu' id='centerWeightid_2'>
<option value='0'>1</option>
</select>
<select class='weightRating-c' name='right_asswwwwwwwwuuuuuuuu' id='rightWeightid_2'>
<option value=''></option>
<option value='1'>2</option>
<option value='2'>3</option>
<option value='3'>4</option>
<option value='4'>5</option>
<option value='5'>6</option>
<option value='6'>7</option>
<option value='7'>8</option>
<option value='8'>9</option>
</select>
</div><label class='ratingLabelRight'>
Local Property Opera</label></div>
</td>
</tr>
<tr>
<td>
<div class='ratingDiver'><label class='ratingLabelLeft' style='float: left;'>Awwwwwwww55555555555</label><div class='rating-c'>
<select class='weightRating-a' name='left_Awwwwwwww55555555555' id='leftWeightid_3'>
<option value=''></option>
<option value='8'>9</option>
<option value='7'>8</option>
<option value='6'>7</option>
<option value='5'>6</option>
<option value='4'>5</option>
<option value='3'>4</option>
<option value='2'>3</option>
<option value='1'>2</option>
</select>
<select class='weightRating-b' name='center_Awwwwwwww55555555555' id='centerWeightid_3'>
<option value='0'>1</option>
</select>
<select class='weightRating-c' name='right_Awwwwwwww55555555555' id='rightWeightid_3'>
<option value=''></option>
<option value='1'>2</option>
<option value='2'>3</option>
<option value='3'>4</option>
<option value='4'>5</option>
<option value='5'>6</option>
<option value='6'>7</option>
<option value='7'>8</option>
<option value='8'>9</option>
</select>
</div><label class='ratingLabelRight'>
DDwwwwwwwoooouuuuuuu</label></div>
</td></tr>
<tr>
<td>
<div class='ratingDiver'><label class='ratingLabelLeft' style='float: left;'>Awwwwwwww55555555555</label><div class='rating-c'>
<select class='weightRating-a' name='left_Awwwwwwww55555555555' id='leftWeightid_4'>
<option value=''></option>
<option value='8'>9</option>
<option value='7'>8</option>
<option value='6'>7</option>
<option value='5'>6</option>
<option value='4'>5</option>
<option value='3'>4</option>
<option value='2'>3</option>
<option value='1'>2</option>
</select>
<select class='weightRating-b' name='center_Awwwwwwww55555555555' id='centerWeightid_4'>
<option value='0'>1</option>
</select>
<select class='weightRating-c' name='right_Awwwwwwww55555555555' id='rightWeightid_4'>
<option value=''></option>
<option value='1'>2</option>
<option value='2'>3</option>
<option value='3'>4</option>
<option value='4'>5</option>
<option value='5'>6</option>
<option value='6'>7</option>
<option value='7'>8</option>
<option value='8'>9</option>
</select>
</div><label class='ratingLabelRight'>
Local Property Opera</label></div>
</td>
</tr>
<tr>
<td>
<div class='ratingDiver'><label class='ratingLabelLeft' style='float: left;'>DDwwwwwwwoooouuuuuuu</label><div class='rating-c'>
<select class='weightRating-a' name='left_DDwwwwwwwoooouuuuuuu' id='leftWeightid_5'>
<option value=''></option>
<option value='8'>9</option>
<option value='7'>8</option>
<option value='6'>7</option>
<option value='5'>6</option>
<option value='4'>5</option>
<option value='3'>4</option>
<option value='2'>3</option>
<option value='1'>2</option>
</select>
<select class='weightRating-b' name='center_DDwwwwwwwoooouuuuuuu' id='centerWeightid_5'>
<option value='0'>1</option>
</select>
<select class='weightRating-c' name='right_DDwwwwwwwoooouuuuuuu' id='rightWeightid_5'>
<option value=''></option>
<option value='1'>2</option>
<option value='2'>3</option>
<option value='3'>4</option>
<option value='4'>5</option>
<option value='5'>6</option>
<option value='6'>7</option>
<option value='7'>8</option>
<option value='8'>9</option>
</select>
</div><label class='ratingLabelRight'>
Local Property Opera</label></div>
</td>
</tr>
The issue is that the pager doesnt work and but the sorter works. help.
It looks like tablesorter is being mix-and-matched from the original tablesorter and the forked version of tablesorter - they are not compatible with each other!
Since you are using a Bootstrap theme, it might be better to use the forked version. Instead of pointing to files from the respective sites, I would recommend using the latest version hosted by CDNJS:
https://cdnjs.com/libraries/jquery.tablesorter
As an aside, since there are select elements within the table, and sorting causes these elements to be shifted and possibly break their bindings. It would be better to bind to delegated events, which looks something like this:
jQuery('table').on('change', 'select', function(){
var value = jQuery(this).val();
// do something with the updated value
});