jquery Sortierung funktioniert nicht

Question

in meinem Projekt Ich versuche, Daten zu sortieren, auf welche Tabelle Kopfzeile gedrückt wird. Mein HTML-Code ist.

<table id="mytable"> 
     <thead> 
     <tr> 
      <th id="eid">Employee ID</th> 
      <th id="ename">Employee Name</th> 
      <th id="econtact">Employee Contact</th> 
      <th id="esalary">Employee Salary</th> 
      <th id="ephone">Employee Phone</th> 
      <th id="ecity">Employee City</th> 
      <th id="edate">Join Date</th> 
      <th>Action</th> 
     </tr> 
     </thead> 
     <tbody> 
<?php 
require 'config.php'; 
ini_set('display_errors', 1); ini_set('display_startup_errors', 1); 
error_reporting(E_ALL); 
$query = mysqli_query($conn, "SELECT * FROM emp"); 
while($row = mysqli_fetch_array($query)) { 
?> 
     <tr> 
      <td align="center"><?php echo $row['emp_id']; ?></td> 
      <td align="center"><?php echo $row['emp_name']; ?></td> 
      <td align="center"><?php echo $row['emp_contact']; ?></td> 
      <td align="center"><?php echo $row['emp_salary']; ?></td> 
      <td align="center"><?php echo $row['emp_phone']; ?></td> 
      <td align="center"><?php echo $row['emp_city']; ?></td> 
      <td align="center"><?php echo $row['join_date']; ?></td> 
      <td align="center"><a href="update.php?emp_id=<?php echo $row['emp_id'];?>">Update</a> | <a href="delete.php?emp_id=<?php echo $row['emp_id'];?>" class="del">Delete</a></td> 
     </tr> 
<?php 
} 
?> 
    </tbody> 
</table> 

und meine Jquery-Code ist.

<script type="text/javascript"> 
function sortTable(f,n){ 
var rows = $('#mytable 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) { 
    $('#mytable').children('tbody').append(row); 
}); 
} 
var f_edate = 1; 
var f_eid = 1; 
var f_ename = 1; 
var f_econtact = 1; 
var f_esalary = 1; 
var f_ephone = 1; 
var f_ecity = 1; 

$("#eid").click(function(){ 
f_eid *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_eid,n); 
}); 
$("#ename").click(function(){ 
f_ename *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_ename,n); 
}); 
$("#econtact").click(function(){ 
f_econtact *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_econtact,n); 
}); 
$("#esalary").click(function(){ 
f_esalary *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_esalary,n); 
}); 
$("#ephone").click(function(){ 
f_ephone *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_ephone,n); 
}); 
$("#ecity").click(function(){ 
f_ecity *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_ecity,n); 
}); 
$("#edate").click(function(){ 
f_edate *= -1; 
var n = $(this).prevAll().length; 
sortTable(f_edate,n); 
}); 
</script> 

das ist mein css

/* CSS Document */ 
table{ 
width:100%; 
border:1px solid black; 
} 
th:hover{ 
cursor:pointer; 
background:#AAA; 

} 

ich kann Tabellenkopf klicken, aber Datensätze bleiben werden wie zuvor. sie sortieren nicht. Bitte hilf mir.

Answer 1

Verwenden DataTable jQuery Plugin, das die Sortierfunktionalität haben und auch die Suche functionality.see Beispiel auf ihre page.Page Verbindung wird geben unter

https://www.datatables.net/

Hoffnung, dass Ihr Problem

lösen