반응형
jquery로만 쓸 수 있는 테이블 정렬 하는 코드
테이블 아이디만 변경해서 사용하면 된다.
$(document).ready(function(){
$('#테이블아이디 th').each(function (column) {
$(this).click(function() {
if($(this).is('.asc')) {
$(this).removeClass('asc');
$(this).addClass('desc');
sortdir=-1;
} else {
$(this).addClass('asc');
$(this).removeClass('desc'); sortdir=1;
}
$(this).siblings().removeClass('asc');
$(this).siblings().removeClass('desc');
var rec = $('#테이블아이디').find('tbody>tr').get();
rec.sort(function (a, b) {
var val1 = $(a).children('td').eq(column).text().toUpperCase();
var val2 = $(b).children('td').eq(column).text().toUpperCase();
return (val1 < val2)?-sortdir:(val1>val2)?sortdir:0;
});
$.each(rec, function(index, row) {
$('#테이블아이디 tbody').append(row);
});
});
});
});
*테이블 헤더에 정렬모양? 이미지 추가하기
1. 알맞은 이미지를 찾은 뒤 컬럼명에 이미지 태그 추가
<th>이름 <img src="resources/tablesorter.png"></th>
2. js 사용하여 상태 별 이미지 변경
$(document).ready(function(){
$('#테이블아이디 th').each(function (column) {
$(this).click(function() {
if($(this).is('.asc')) { // 현재 오름차순인 경우
$(this).removeClass('asc');
$(this).addClass('desc'); // 내림차순으로 변경
$(this).children().attr('src', "resources/img.png"); // 이미지 src 수정
sortdir=-1;
} else { // 현재 오름차순 아닌 경우
$(this).addClass('asc'); // 오름차순으로 변경
$(this).removeClass('desc'); sortdir=1;
$(this).children().attr('src', "resources/img.png"); // 이미지 src 수정
}
$(this).siblings().removeClass('asc');
$(this).siblings().removeClass('desc');
var rec = $('#테이블아이디').find('tbody>tr').get();
rec.sort(function (a, b) {
var val1 = $(a).children('td').eq(column).text().toUpperCase();
var val2 = $(b).children('td').eq(column).text().toUpperCase();
return (val1 < val2)?-sortdir:(val1>val2)?sortdir:0;
});
$.each(rec, function(index, row) {
$('#테이블아이디 tbody').append(row);
});
});
});
});
반응형
'웹개발정보' 카테고리의 다른 글
[CSS] 특정 요소 css 제외 (:not) (0) | 2021.08.04 |
---|---|
[JQuery] checkBox 체크여부 확인(전체체크), 체크된 값만 가져오기 (0) | 2021.04.12 |
[Spring] 테이블 데이터 ajax로 조회하고 행 추가 (0) | 2021.01.18 |
[Spring] Login_Save ID, PWD (cookie) (1) | 2021.01.18 |
[Spring] dataTables 사용법 정리 (feat. ajax) (0) | 2021.01.18 |
댓글