Question

我在表中有多个tbody，其中包含一些span列和行。然后我得到一个jQuery代码，根据tbody - 点击对此th.data进行排序。

在第一个th列中单击它时，它将正确排序。但是，在单击第二个th列时，它不会对tbody进行排序。

以下是摘录：

＆＃13;

var table = $('table'),
    th = table.find('thead th'),
    tbody = table.find('tbody');


$(th).on('click', function() {
    
    $(th).removeClass();
    
    var index = this.cellIndex,
        sortType = $(this).data('sort'),
        sortDir  = $(this).data('dir') || 'asc';
    

		var that = $(this);

    $('table').find('tbody').slice().sort(function(a, b) {
    
    		var dataTH = that.data('class'); 
        
        //alert(dataTH);
    
    		if(dataTH == 'number')
        	{
            //alert("hi this is a number");
            var aText = $(a).find('td.sortNum:eq(' + index + ')').text(),
                bText = $(b).find('td.sortNum:eq(' + index + ')').text();          
          }
          
    		else if(dataTH == 'department')
        	{
            //alert("hi this is a department");
            var aText = $(a).find('td.depart:eq(' + index + ')').text(),
                bText = $(b).find('td.depart:eq(' + index + ')').text();          
          }
    
            if (sortDir == 'desc') {
                temp = aText;
                aText = bText;
                bText = temp;
            }
            
            if (sortType == 'string') {
                return aText.localeCompare(bText);    
            }

						else {
                return +aText - +bText;
            }
        })
        .appendTo('table');

    $(this).data('dir', sortDir == 'asc' ? 'desc' : 'asc');
    $(this).removeClass().addClass('sort-' + sortDir);

});

＆＃13;

table {
  border-collapse: collapse;
  width: 400px;
}

th, td {
    padding: 5px;
    border: 1px #DDD solid;
}

.sort-asc:after,
.sort-desc:after {
    content: '▲';
    font-size: 12px;
}
.sort-desc:after {
    content: '▼';
}

＆＃13;

<table>
    <thead>
        <tr>
            <th data-sort="number" data-class="number" >No</th>
            <th data-sort="number" data-class="department" >Department</th>
            <th data-sort="number">Quantity</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">1</td>
            <td class="depart">20</td>
            <td>20</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">2</td>
            <td class="depart">30</td>
            <td>25</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">3</td>
            <td class="depart">40</td>
            <td>50</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">4</td>
            <td class="depart">50</td>
            <td>15</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>

    <tbody>
        <tr>
            <td rowspan="2" class="sortNum">5</td>
            <td class="depart">60</td>
            <td>32</td>
        </tr>
        <tr>
            <td colspan="2" style="text-align:center">VTP</td>
        </tr>
    </tbody>


    
    
</table>

＆＃13;

Answer 1

您不需要:eq选择器，因为您正在通过css类引用Cells。它在第一列中有效，因为单元格索引为零。你在选择器$(a).find('td.sortNum:eq(' + index + ')')中实际上说的是“给我带有类'sortNum'的td列表，并列出位置index的元素列表。但是选择器的第一个条件 - td .sortNum - 只返回一个元素。

为了让您的第二列再次排序，您可以摆脱:eq部分

    if(dataTH == 'number')
    {
        //alert("hi this is a number");
        var aText = $(a).find('td.sortNum').text(),
            bText = $(b).find('td.sortNum').text();          
    }
    else if(dataTH == 'department')
    {
        //alert("hi this is a department");
        var aText = $(a).find('td.depart').text(),
            bText = $(b).find('td.depart').text();          
    }

另见http://jsfiddle.net/doc_snyder/Lvvmow8g/1/

在一些修改过的列上没有对Tbody进行排序

1 个答案: