tabla - Jquery Ordenar múltiples Tbody

sort table w3schools

Question

Tengo una mesa como esta:

<table>
    <thead>
        <tr>
            <th>Department</th>
            <th>Quantity</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Data</th>
            <th>100</th>
        </tr>
        <tr>
            <td>DTP</td>
            <td>20</td>
        </tr>
        <tr>
            <td>VTP</td>
            <td>30</td>
        </tr>
        <tr>
            <td>RTP</td>
            <td>50</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <th>Testing</th>
            <th>100</th>
        </tr>
        <tr>
            <td>QTP</td>
            <td>20</td>
        </tr>
        <tr>
            <td>ATP</td>
            <td>30</td>
        </tr>
        <tr>
            <td>CTP</td>
            <td>50</td>
        </tr>
    </tbody>
</table>

Cuando hago clic en el encabezado del departamento, tr dentro de los datos y las pruebas deben ser ordenadas. Pero los datos y las pruebas TH deben seguir siendo los mismos.

No quiero usar ningún plugin jQuery. Amablemente comparta el código para hacer esta tarea.

Answer 1

Aquí hay una implementación rápida. Esperemos que lo mejore y corresponda a sus necesidades:

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'';

    $tbody.each(function() {
        $(this).find(''tr'').slice(1).sort(function(a, b) {

            var aText = $(a).find(''td:eq('' + index + '')'').text(),
                bText = $(b).find(''td:eq('' + index + '')'').text();

            if (sortDir == ''desc'') {
                temp = aText;
                aText = bText;
                bText = temp;
            }

            if (sortType == ''string'') {
                return aText.localeCompare(bText);    
            }
            else {
                return +aText - +bText;
            }
        })
        .appendTo(this);
    });

    $(this).data(''dir'', sortDir == ''asc'' ? ''desc'' : ''asc'');
    $(this).removeClass().addClass(''sort-'' + sortDir);
});

Demostración: http://jsfiddle.net/6uzVn/