表排序器寻呼机在调查视图上不起作用
Table sorter pager not working on survey view
我使用条形评级处理调查显示。 我打算将它们放在一个表中，以便每个条形评级成对比较都在一行上。 因此，使用表格排序器中的分页一次显示每一行。 下面是我的HTML和JavaScript代码。
<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>
问题是寻呼机不工作，但分拣机工作
看起来表排序器是从原始表排序器和分叉版本的表排序器混合匹配的 - 它们彼此不兼容！
由于您使用的是引导程序主题，因此最好使用分支版本。与其指向相应站点的文件，我建议使用 CDNJS 托管的最新版本：
https://cdnjs.com/libraries/jquery.tablesorter
顺便说一句，由于表中存在选择元素，排序会导致这些元素移动并可能破坏其绑定。最好绑定到委托事件，如下所示：
jQuery('table').on('change', 'select', function(){
var value = jQuery(this).val();
// do something with the updated value
});
相关文章：
- node.js/javascript/couchdb视图到关联数组似乎不起作用
- 带有粘性标题的角度ng视图不起作用
- rails 4.1.6 form_for coffeescript在多个视图上不起作用
- 如果视图中没有Jquery脚本引用，Unobtrusive Javascript Validation是不起作用的
- 网格视图页眉冻结在母版页中不起作用
- 挖空.js嵌套视图模型不起作用
- Angular 1.3+ui路由器+生成器ng poly嵌入嵌套(?）视图不起作用
- 在更改事件处理程序中(重新）呈现主干视图不起作用
- 角度 UI 路由器嵌套视图不起作用
- 页面重新加载后，主干单视图不起作用
- 主干中的简单视图不起作用
- UI路由器状态的多个视图不起作用.未报告错误
- 使用Jquery、MVC和Json更新多个部分视图不起作用
- AngularJS中的嵌套视图不起作用
- 共享控制器时视图不起作用
- Angular的ng视图不起作用
- 带有name属性的离子导航视图不起作用
- Asp.net MVC使用Ajax从PartialView的actionlink加载父视图不起作用
- 选项卡视图不起作用
- Angular Js -改变视图不起作用
