Created
March 21, 2017 10:16
-
-
Save Kcko/be842c5cface059a96178f346154370e to your computer and use it in GitHub Desktop.
Jquery - řazení tabulky - tablesorter
demo - https://jsfiddle.net/bmfz1pau/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.focus { | |
background-color: #ff00ff; | |
color: #fff; | |
cursor: pointer; | |
font-weight: bold; | |
} | |
.selected { | |
background-color: #ff00ff; | |
color: #fff; | |
font-weight: bold; | |
} | |
.asc:after { | |
content: "\25B2"; | |
} | |
.desc:after { | |
content: "\25BC"; | |
} | |
table { | |
font-family: arial, sans-serif; | |
border-collapse: collapse; | |
width: 100%; | |
} | |
td, | |
th { | |
border: 1px solid #dddddd; | |
text-align: left; | |
padding: 8px; | |
} | |
tr:nth-child(even) { | |
background-color: #dddddd; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<table id="tblData"> | |
<tr> | |
<th>Name</th> | |
<th>Age</th> | |
<th>Country</th> | |
</tr> | |
<tr> | |
<td>Maria Anders</td> | |
<td>30</td> | |
<td>Germany</td> | |
</tr> | |
<tr> | |
<td>Francisco Chang</td> | |
<td>24</td> | |
<td>Mexico</td> | |
</tr> | |
<tr> | |
<td>Roland Mendel</td> | |
<td>100</td> | |
<td>Austria</td> | |
</tr> | |
<tr> | |
<td>Helen Bennett</td> | |
<td>28</td> | |
<td>UK</td> | |
</tr> | |
<tr> | |
<td>Yoshi Tannamuri</td> | |
<td>35</td> | |
<td>Canada</td> | |
</tr> | |
<tr> | |
<td>Giovanni Rovelli</td> | |
<td>46</td> | |
<td>Italy</td> | |
</tr> | |
<tr> | |
<td>Narendra Sharma</td> | |
<td>56</td> | |
<td>India</td> | |
</tr> | |
<tr> | |
<td>Alex Smith</td> | |
<td>59</td> | |
<td>USA</td> | |
</tr> | |
</table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function() { | |
$('th').each(function(col) { | |
$(this).hover( | |
function() { | |
$(this).addClass('focus'); | |
}, | |
function() { | |
$(this).removeClass('focus'); | |
} | |
); | |
$(this).click(function() { | |
if ($(this).is('.asc')) { | |
$(this).removeClass('asc'); | |
$(this).addClass('desc selected'); | |
sortOrder = -1; | |
} else { | |
$(this).addClass('asc selected'); | |
$(this).removeClass('desc'); | |
sortOrder = 1; | |
} | |
$(this).siblings().removeClass('asc selected'); | |
$(this).siblings().removeClass('desc selected'); | |
var arrData = $('table').find('tbody >tr:has(td)').get(); | |
arrData.sort(function(a, b) { | |
var val1 = $(a).children('td').eq(col).text().toUpperCase(); | |
var val2 = $(b).children('td').eq(col).text().toUpperCase(); | |
if ($.isNumeric(val1) && $.isNumeric(val2)) | |
return sortOrder == 1 ? val1 - val2 : val2 - val1; | |
else | |
return (val1 < val2) ? -sortOrder : (val1 > val2) ? sortOrder : 0; | |
}); | |
$.each(arrData, function(index, row) { | |
$('tbody').append(row); | |
}); | |
}); | |
}); | |
}); |
I didn't find any easiest way to do this.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
What if I need to sort table coloum two what changes I need to make