Table 分拣寻呼机无法在调查视图中工作

Question

我正在使用条形评级进行调查显示。我打算将它们放在 table 中，这样每个条形评级成对比较都在一行中。因此使用 tablesorter 的分页一次显示每一行。下面是我的 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>

问题是寻呼机不工作，但分类器工作。帮助。

Answer 1

看起来 tablesorter 正在与原始 tablesorter 和 tablesorter 的分叉版本混合匹配 - 它们不是相互兼容!

由于您使用的是 Bootstrap 主题，最好使用分叉版本。我建议使用 CDNJS 托管的最新版本，而不是指向各个站点的文件：

https://cdnjs.com/libraries/jquery.tablesorter

顺便说一句，由于 table 中有 select 个元素，排序会导致这些元素移动并可能破坏它们的绑定。最好绑定到 delegated events，它看起来像这样：

jQuery('table').on('change', 'select', function(){
    var value = jQuery(this).val();
    // do something with the updated value
});

Table 分拣寻呼机无法在调查视图中工作

Table sorter pager not working on survey view

html

javascript

tablesorter