j查询排序不起作用

在我的项目中，我尝试对按下的表头的数据进行排序。 我的HTML代码是。

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

我的jquery代码是。

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

这是我的 CSS

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

我可以单击表标题，但记录仍像以前一样。 他们没有排序。 请帮助我。