表分拣机寻呼机不在调查视图上工作

时间：2015-03-10 11:14:02

标签： javascript html tablesorter

我使用条形评级进行调查显示。我打算将它们放在一个表中，使得每个条形评级成对比较在一行上。因此，使用来自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>

问题在于寻呼机不起作用，但分拣机工作正常。救命。

1 个答案:

答案 0 :(得分：0)

看起来tablesorter正在与原始的tablesorter和forkorter的分叉版本进行混合匹配 - 它们彼此不兼容！

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

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

顺便说一下，由于表中有选择元素，并且排序导致这些元素被移位并可能破坏它们的绑定。绑定到delegated events会更好，看起来像这样：

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