jquery를 이용한ajax 테이블 정렬
여러책을 놔두고 베스트셀러를 주제로 테이블에 정렬시켜보자. 기본적으로 팔려나가는 순위되로 나영시켜놓고 책제목, 순위, 저자, 가격순으로 클릭시 정렬되게 해보자
네이버에 올라와있는 베스트셀러를 참조했다.
다음과같은 이미지를 모델로 할것이다
html은 다음과 같이짜주었다. 너무길기에 아래 내용들은 생략.그리고 테이블 웹표준 코딩에 대해서 저세히 알고싶다면 표준웹코딩게시물을 보도록
긴 소스기에 접어놓았다
단지 기능상공부하는것이기에 css의 경우는 자세히는 생략하겠다.단 테이블의 열의 짝수,홀수에 따라색을 주려고한다. 방법은 3가지인다.
- tr마다 클래스를 두가지주어 두색을css에서 지정
- css3에서 짝수 홀수 선택자를이용하는방법
- jQuery에서 css3 선택자를이용
css3를 사용하면 좋겠지만 여전히 바로 css3가적용안되는병맛같은 IE6때문에 3번째방법을 이용하겠다.짝수 홀수 선택자를 이용하고.addClass()함수로 각기 클래스를 달아주었다.
$('table.sortable tbody tr:odd').addClass('odd');
$('table.sortable tbody tr:even').addClass('even');
클릭시 이벤트작동하게하기
$('table.sortable th.sorting').click()
이제까지 배워온대로라면 위와같이작동하게 되도 문제없다.하지만 그러면 후에 다시소스를짜거나 편집하게될경우 스크립트소스를다띁어고쳐야하는문제가있다.따라서 좁 복잡하지만 변수를주고 클래스가 있는지 .each()함수로 검사하고 그에따라 작동하도록할것이다.
$('table.sortable').each(function() {
//sortable클래스를가진 에서
var $table = $(this);
$('th', $table).each(function(column) {
//또그중 th엘리먼트에서 변수지정
var $header = $(this);
if ($header.is('.sorting')) {
//header에서 sorting이란 클래스가있다면
$header.addClass('clickable').hover(function() {
//clickable이라는 클래스를 단다 그리고 호버하면
$header.addClass('hover');
//hover이라는 클래스를 달아준다.
}, function() {
$header.removeClass('hover');
//호버가 안되면 다시 hover이라는 클래스 삭제
}).click(function()
위에서보면 this로 스스로 변수를 정해주고 작동되도록 되어있다.마지막으로 hover 그리고 clickable이란 클래스를 달아주었고 css로 약간꾸밈을주자
.clickable {cursor: pointer;}
.hover {text-decoration: underline;}
정렬하기
이제 클릭시 책제목, 순위, 저자, 가격순으로 클릭시 정렬되는 함수를 만들어보자. 정렬할때는 자바스크립스함수.sort()를 사용한다
.sort()
여러 숫자를 놔두고 변수를 지정하고 sort를 간단하게사용해보자
var rows = [ 1, 3, 57, 21, 10, 100]; rows.sort();
위와같이 하면 정렬은 되지만 알파벳 순으로 정렬되어버린다 따라서 [ 1, 10, 100, 21, 3, 51] 이란 결과가 나타날것이다. 문자에서는 크기순서로 이루어져야지 a, b, c, 가나다 순으로 될것이다. 따라서 리스트중 두가지를 비교하는 방법으로 사용할것이다.
rows.sort(function(a, b) {
//정렬된 두가지원소가있다면
if ( a < b ) return -1;
//그중작다면 -1 반환:따라서 뒤로밀린다
if ( a > b ) return 1;
//크다면 1 반환: 따라서 앞으로
retuen 0;
//같거나 어느것이 먼저와도될경우 0 :그자리유지
}
이를 이용하여 완성된 함수는
var rows = $table.find('tbody > tr').get();
//테이블바디에서 tr을 찾아 row로 지정
rows.sort(function(a, b) {
//td엘리먼트에서 텍스트의 인자비교
var keyA = $(a).children('td').eq(column).text()
var keyB = $(b).children('td').eq(column).text()
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
//각각 정리된 배열을 다시테이블에삽입.
$table.children('tbody').append(row);
마지막에는 다시테이블에 삽이하여 정영되도록하였다. 그럼이제까지본 소스를 종합해보면
$(document).ready(function() {
$('table.sortable tbody tr:odd').addClass('odd');
$('table.sortable tbody tr:even').addClass('even');
$('table.sortable').each(function() {
var $table = $(this);
$('th', $table).each(function(column) {
var $header = $(this);
if ($header.is('.sorting')) {
//header에서 sorting이란 클래스가있다면
$header.addClass('clickable').hover(function() {
//clickable이라는 클래스를 단다 그리고 호버하면
$header.addClass('hover');
//hover이라는 클래스를 달아준다.
}, function() {
$header.removeClass('hover');
//호버가 안되면 다시 hover이라는 클래스 삭제
}).click(function() {
//자 그리고 클릭시
var rows = $table.find('tbody > tr').get();
//테이블바디에서 tr을 찾아 row로 지정
rows.sort(function(a, b) {
//알파벳순이아닌 값의크기순으로 정렬 하기 인자비교
var keyA = $(a).children('td').eq(column).text()
var keyB = $(b).children('td').eq(column).text()
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
//각각 정리된 배열을 다시테이블에삽입.
$table.children('tbody').append(row);
}); }); }}); }); });
최종정리
위와같이하면 작동되는것을 확인할수있다 하지만 문제는 작동된 후 결과를 보면 색의 정열이 원래 정해진대로 유지되어클릭시 바뀐정열에서도 그대로 적용된다는 점이 문제이다.
여기서 확인해보자http://sianasiatiger.cafe24.com/study/T_usetable_colorER.html
따라서 정렬될떄마다 새롭게 적용되도록 함수를만들어 줘야한다. 이름을 reSortColors로 해주고 다음과 같이 해주었다
$(document).ready(function() {
var reSortColors = function($table) {
//그냥지정했던 짝,홀에따른 클래스부여를
//함수로 만들어놓았다.
$('tbody tr:odd', $table)
.removeClass('even').addClass('odd');
$('tbody tr:even', $table)
.removeClass('odd').addClass('even');
};
$('table.sortable').each(function() {
var $table = $(this);
reSortColors($table);
//여기서먼저적용
$('th', $table).each(function(column) {
var $header = $(this);
if ($header.is('.sorting')) {
$header.addClass('clickable').hover(function() {
$header.addClass('hover');
}, function() {
$header.removeClass('hover');
}).click(function() {
var rows = $table.find('tbody > tr').get();
rows.sort(function(a, b) {
var keyA = $(a).children('td').eq(column).text()
.toUpperCase();
var keyB = $(b).children('td').eq(column).text()
.toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
reSortColors($table);
//또 완료되었을따 다시 적용
});} });});});
이로서 원했던 결과는완성되었다
확하려면 여기로..http://sianasiatiger.cafe24.com/study/T_usetable.html
댓글