JQuery Table Sort
JQuery Table Sort
HTML
<table class="tableEmpQClone">
<tr class="rowBoldBlackText">
<td class="nameColumnTitle"
style="word-wrap: break-word; width:150px;">
Employee Name
</td>
<td class="qualificationIDText"
width="60px"
style="word-wrap: break-word;">
Spanish
</td>
<td class="qualificationIDText"
width="60px"
style="word-wrap: break-word;">
French
</td>
<td class="qualificationIDText"
width="60px"
style="word-wrap: break-word;">
Bahasa
</td>
<td class="qualificationIDText"
width="60px"
style="word-wrap: break-word;">
Nihonggo
</td>
<td class="qualificationIDText"
width="60px"
style="word-wrap: break-word;">
Hangul
</td>
</tr>
</table>
<table class="tableEmpQ">
<tr>
<td class="nameColumn" style="word-wrap: break-word; width:150px">
Rey Donovan
</td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center" width="60px"><input type="checkbox" checked="checked" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
</tr>
<tr>
<td class="nameColumn" style="word-wrap: break-word; width:150px">
Ali Van
</td>
<td align="center" width="60px"><input type="checkbox" checked="checked" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center" width="60px"><input type="checkbox" /></td>
</tr>
<tr>
<td class="nameColumn" style="word-wrap: break-word; width:150px">
Cecil Damon
</td>
<td align="center" width="60px"><input type="checkbox" /></td>
<td align="center"...
CSS
table.tableEmpQClone {
width: 100%;
font-weight: bold;
border-collapse: collapse;
table-layout: fixed;
}
table.tableEmpQClone td {
padding: 0px;
border: 1px solid #003366;
border-color: #003366;
}
.rowBoldBlackText {
background-color: #E4E8ED;
font-weight: bold;
color: #000000;
}
.nameColumnTitle {
text-align: center;
}
.qualificationIDText {
font-family: Verdana, Tahoma, sans-serif;
font-size: 9px;
TEXT-DECORATION: NONE;
text-align: center;
color: #003366;
}
table.tableEmpQ {
width: 100%;
font-weight: bold;
border-collapse: collapse;
table-layout: fixed;
}
table.tableEmpQ td {
padding: 0px;
border: 1px solid #003366;
border-color: #003366;
}
.nameColumn {
width: 150px;
text-align: left;
}
JavaScript
$(document).ready(function() {
var f_sl = 1;
var f_nm = 1;
$(".qualificationIDText").click(function(){
f_sl *= -1;
var n = $(this).prevAll().length;
sortTable(f_sl,n);
});
$(".nameColumnTitle").click(function(){
f_nm *= -1;
var n = $(this).prevAll().length;
sortTable(f_nm,n);
});
});
function sortTable(f,n){
var rows = $('.tableEmpQ 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();
var b = $(elm).children('td').eq(n).find('input[type="checkbox"]');
if(v == ''){
if(b.is(':checked')){
v = parseInt("0",10);
}else{
v = parseInt("1",10);
}
}
if($.isNumeric(v)){
v = parseInt(v,10);
}
return v;
}
$.each(rows, function(index, row) {
$('.tableEmpQ').children('tbody').append(row);
});
}