스크립트 추가
테이블 정렬
jQuery.fn.alternateRowColors = function() {
$('tbody tr:odd', this)
.removeClass('even').addClass('odd');
$('tbody tr:even', this)
.removeClass('odd').addClass('even');
return this;
};
$('table.sortable').each(function() {
var $table = $(this);
$table.alternateRowColors();
$('th', $table).each(function(column) {
var $header = $(this);
var findSortKey;
if ($header.is('.sort-basic')) {
findSortKey = function($cell) {
return $cell.text().toUpperCase();
};
}
else if ($header.is('.sort-ranking')) {
findSortKey = function($cell) {
var key = $cell.text();
key = parseFloat(key);
return isNaN(key) ? 0 : key;
};
}
if (findSortKey) {
$header.addClass('clickable').hover(function() {
$header.addClass('hover');
}, function() {
$header.removeClass('hover');
}).click(function() {
var sortDirection = 1;
if ($header.is('.sorted-asc')) {
sortDirection = -1;
}
var rows = $table.find('tbody > tr').get();
$.each(rows, function(index, row) {
var $cell = $(row).children('td').eq(column);
row.sortKey = findSortKey($cell);
});
rows.sort(function(a, b) {
if (a.sortKey < b.sortKey) return -sortDirection;
if (a.sortKey > b.sortKey) return sortDirection;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
row.sortKey = null;
});
$table.find('th').removeClass('sorted-asc')
.removeClass('sorted-desc');
if (sortDirection == 1) {
$header.addClass('sorted-asc');
}
else {
$header.addClass('sorted-desc');
}
$table.alternateRowColors();
$table.trigger('repaginate');
});
}
});
});
페이징
--------------------------------------------------
$(document).ready(function() {
$('table.paginated').each(function() {
var currentPage = 0;
var numPerPage = 10;
var $table = $(this);
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();
$table.bind('repaginate', function() {
$table.find('tbody tr').hide()
.slice(currentPage * numPerPage,
(currentPage + 1) * numPerPage)
.show();
});
var numRows = $table.find('tbody tr').length;
var numPages = Math.ceil(numRows / numPerPage);
var $pager = $('<div class="pager" style="margin-top:10px; text-align:center;"></div>');
for (var page = 0; page < numPages; page++) {
$('<span class="page-number" style="cursor:pointer; font-size: 12px; font-weight:bold; margin-right:10px;"></span>').text(page + 1)
.bind('click', {newPage: page}, function(event) {
currentPage = event.data['newPage'];
$table.trigger('repaginate');
$(this).addClass('active')
.siblings().removeClass('active');
}).appendTo($pager).addClass('clickable');
}
$pager.insertAfter($table)
.find('span.page-number:first').addClass('active');
});
});
table 태그의 class명으로 sortable paginated 을 준다
<table class="sortable paginated">
th에 클래스 명을 주면 sort-ranking 기준으로 정렬
<th class="sort-ranking" style="text-align: center;">번호</th>
<th class="sort-basic" style="text-align: center;">제목</th>
