Skip to content

Instantly share code, notes, and snippets.

@Kcko
Created March 21, 2017 10:16
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save Kcko/be842c5cface059a96178f346154370e to your computer and use it in GitHub Desktop.
Save Kcko/be842c5cface059a96178f346154370e to your computer and use it in GitHub Desktop.
Jquery - řazení tabulky - tablesorter demo - https://jsfiddle.net/bmfz1pau/
.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;
}
<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>
$(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);
});
});
});
});
@anil826
Copy link

anil826 commented May 11, 2018

What if I need to sort table coloum two what changes I need to make

@anil826
Copy link

anil826 commented May 11, 2018

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