Tabelle Sortier Ausgabe auf versteckte Reihe

Question

Example Fiddle

Tabelle auf versteckte Reihe Sortier Problem. Ich habe Geige geschaffen. Bitte helfen Sie mit.

function sortTable(f, n) { 
 
    var rows = $('.videolisttble tbody tr').get(); 
 
    rows.sort(function (a, b) { 
 
     var A = getVal(a); 
 
     var B = getVal(b); 
 
     if (A < B) { 
 
      return -1 * f; 
 
     } 
 
     if (A > B) { 
 
      return 1 * f; 
 
     } 
 
     return 0; 
 
    }); 
 

 
    function getVal(elm) { 
 
     var v = $(elm).children('td').eq(n).text().toUpperCase(); 
 
     if ($.isNumeric(v)) { 
 
      v = parseInt(v, 10); 
 
     } 
 
     return v; 
 
    } 
 

 
    $.each(rows, function (index, row) { 
 
     $('.videolisttble').children('tbody').append(row); 
 
    }); 
 
} 
 

 
var f_sl = 1; 
 
var f_nm = 1; 
 

 
$(".matchhead").click(function() { 
 
    f_sl *= -1; 
 
    var n = $(this).prevAll().length; 
 
    sortTable(f_sl, n); 
 
}); 
 

 
$(".timehead").click(function() { 
 
    f_nm *= -1; 
 
    var n = $(this).prevAll().length; 
 
    sortTable(f_nm, n); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 

 
<h2> Before sorting</h2> 
 
    
 
<table class="table table-responsive videolisttble dataTable no-footer" id="DataTables_Table_0"> 
 
\t \t <thead> 
 
\t \t \t <tr><th class="matchhead">Match</th><th class="timehead">Date &amp; Time</th><th> Action</th></tr> 
 
\t \t </thead> 
 
\t \t <tbody> \t 
 
\t \t 
 
\t \t \t <tr class="manageiconswrap" role="row"> 
 
\t \t \t \t <td>D Team vs Team E</td> 
 
\t \t \t \t <td>Tuesday March 15th, 2016, 05:00 PM</td> 
 
\t \t \t \t <td class="actioncont"> \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </td> 
 
\t \t \t </tr> \t \t \t \t \t 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">D Team</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">Team E</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="manageiconswrap"> 
 
\t \t \t \t <td>C Team vs Team F</td> 
 
\t \t \t \t <td>Sunday October 18th, 2015, 03:00 PM</td> 
 
\t \t \t \t <td class="actioncont"></td> 
 
\t \t \t </tr> \t 
 

 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">C Team</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">Team F</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="manageiconswrap"> 
 
\t \t \t \t <td>A Team vs Team B</td> 
 
\t \t \t \t <td>Sunday October 18th, 2015, 03:00 PM</td> 
 
\t \t \t \t <td class="actioncont"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">A Team</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">Team B</td> 
 
\t \t \t </tr> 
 
\t 
 
\t </tbody> 
 
</table> 
 
    
 
    
 
    \t 
 
<h2> After sorting</h2> 
 

 

 
<table class="table table-responsive dataTable no-footer" id="DataTables_Table_0"> 
 
\t \t <thead> 
 
\t \t \t <tr><th class="">Match</th><th class="">Date &amp; Time</th><th> Action</th></tr> 
 
\t \t </thead> 
 
\t \t <tbody> \t 
 
\t \t \t 
 
\t \t \t 
 
\t \t \t <tr class="manageiconswrap"> 
 
\t \t \t \t <td>A Team vs Team B</td> 
 
\t \t \t \t <td>Sunday October 18th, 2015, 03:00 PM</td> 
 
\t \t \t \t <td class="actioncont"></td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">A Team</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">Team B</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="manageiconswrap"> 
 
\t \t \t \t <td>C Team vs Team F</td> 
 
\t \t \t \t <td>Sunday October 18th, 2015, 03:00 PM</td> 
 
\t \t \t \t <td class="actioncont"></td> 
 
\t \t \t </tr> \t 
 

 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">C Team</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">Team F</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="manageiconswrap" role="row"> 
 
\t \t \t \t <td>D Team vs Team E</td> 
 
\t \t \t \t <td>Tuesday March 15th, 2016, 05:00 PM</td> 
 
\t \t \t \t <td class="actioncont"> \t \t \t \t \t \t \t \t \t \t 
 
\t \t \t \t </td> 
 
\t \t \t </tr> \t \t \t \t \t 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">D Team</td> 
 
\t \t \t </tr> 
 
\t \t \t <tr class="donotsort"> 
 
\t \t \t \t <td colspan="3" style="display:none;"class="toggledropcont">Team E</td> 
 
\t \t \t </tr> 
 
\t 
 
\t </tbody> 
 
</table>

Answer 1

Working fiddle

Aufgrund der verschachtelten Tabellen wird die Funktion zwischen Tabellen Zeilen und sortieren auch die untergeordneten Tabellenzeilen verwechselt werden, um zu verhindern, dass Sie Ihre Wähler ändern müssen Ziel nur .videolisttble direkte Zeilen.

var rows = $('.videolisttble>tbody>tr').get(); 

this helps:

Verwenden > Zeichen direktes Kind zielen.