<div><img onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" this.src)' alt="" src="http://files.jb51.net/upload/201103/20110320232752663.bmp" onload="if(this.width>650) this. style="max-width:90%" border="0"></div> <div> </div> <div><img onclick='window.open("http://blog.51cto.com/viewpic.php?refimg=" this.src)' alt="" src="http://files.jb51.net/upload/201103/20110320232753596.bmp" onload="if(this.width>650) this. style="max-width:90%" border="0"></div> <div> </div> <div> </div> <div>코드는 매우 간단하며 첨부파일에서 다운받아서 바로 실행하시면 됩니다.<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="90203" class="copybut" id="copybut90203" onclick="doCopy('code90203')"><u>코드를 복사하세요</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code90203"> <br><script type="text/javascript" 언어="javascript"> <br>$(function() { <br>jQuery.fn.alternateRowColors = function () { //플러그인으로 만들기 형식<br>$('tbody tr:odd', this).removeClass('even').addClass('odd') //홀수 행은 서로 색상을 변경합니다. row<br>$('tbody tr:even', this ).removeClass('odd').addClass('even'); // 짝수 행은 한 행씩 색상을 변경합니다.<br>return this; <br>$('table.myTable').each(function() { <br>var $table = $(this); //jquery 객체로 저장 테이블<br>$table.alternateRowColors($table); //정렬 시 대체 행 색상 변경<br>$('th', $table).each(function(column) { <br>var findSortKey; <br>if ($(this).is('.sort- alpha')) { //알파벳순으로 정렬<br>findSortKey = function( $cell) { <br>return $cell.find('sort-key').text().toUpperCase() '' $cell.text( ).toUpperCase(); <br>}; <br>} else if ($(this).is('.sort-numeric')) { //숫자순 정렬<br>findSortKey = function($cell) { <br>var key = parseFloat($cell.text().replace (/^[^d.]*/, '')) <br>return isNaN(key) ? <br>}; 🎜>} else if ($(this).is('.sort-date')) { //날짜순 정렬<br>findSortKey = function($cell) { <br>return Date.parse('1 ' $ cell.text()); <br>}; <br> } <br>if (findSortKey) { <br>$(this).addClass('clickable').hover(function() { $(this). addClass('hover'); }, function() { $( this).removeClass('hover'); }).click(function() { <br>//역 정렬 상태 설명<br>var newDirection ; <br>if ($(this).is(' .sorted-asc')) { <br>newDirection = -1 <br>} <br>varrows = $table.find('tbody>tr' ).get(); //데이터 행을 배열로 변환 <br>$.each(rows, function(index, row) { <br>row.sortKey = findSortKey($(row).children('td'). eq(열)) <br>}); <br>rows.sort(function(a, b) { <br>if (a.sortKey < b.sortKey) return -newDirection; <BR>if (a .sortKey > b.sortKey) return newDirection; <br>return 0; <br>}) <br>$.each(rows, function(index, row) { <br>$table.children('tbody' ).append(row); <br>row.sortKey = null; <br>}) <br>$table.find('th').removeClass('sorted-asc').removeClass('sorted-desc '); <br>var $sortHead = $table.find('th').filter(':nth-child(' (열 1) ')') <br>//역 정렬 구현<br> (newDirection == 1) { <br>$sortHead .addClass('sorted-asc') <br>} else { <br>$sortHead.addClass('sorted-desc') <br>} <br> //인터레이스 색상 함수 호출<br>$table .alternateRowColors($table); <br>//정렬된 열의 스타일을 제거하고 현재 열에 스타일을 추가합니다. <br>$table.find('td' ).removeClass('sorted').filter(': nth-child(' (열 1) ')').addClass('sorted') <br>$table.trigger('repaginate'); }); <br>}); <br>}) <br>//Paging<br>$(function() { <br>$('table.paginated' ).each(function() { <br>var currentPage = 0; <br>var numPerPage = 10; <br>var $table = $(this); <br>$table.bind('repaginate', function( ) { <br>$table.find('tbody tr ').hide().slice(currentPage * numPerPage, (currentPage 1) * numPerPage).show() <br>var numRows = $table.find('tbody tr').length; <br>var numPages = Math.ceil(numRows / numPerPage) <br>var $pager = $('<div class="pager">< /div>'); <br>for (var page = 0; page < numPages; page ) { <BR>$('<span class="page-number"></span>'). text(페이지 1) <br>.bind('click ', { newPage: page }, function(event) { <br>currentPage = event.data['newPage']; <br>$table.trigger('repaginate '); <br>$(this).addClass( 'active').siblings().removeClass('active') <br>}).appendTo($pager).addClass('clickable'); >} <br>$pager.insertBefore($table) ; <br>$table.trigger('repaginate') <br>$pager.find('span.page-number:first').addClass('active '); <br>}); <br>} ) <br></script><br><br><br><br>패키지 다운로드 주소<br><br> </div> </div>
