이 문서의 예에서는 jquery가 테이블의 로컬 정렬을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다. 코드 복사 코드는 다음과 같습니다. jquery 表格排序 <br> 머리<br> {<br> 배경색: 파란색;<br> 색상: 흰색;<br> }<br> tr.odd<br> {<br> 배경색: #ddd;<br> }<br> tr.even<br> {<br> 배경색: #eee;<br> }<br> .클릭 가능<br> {<br> 텍스트 장식: 밑줄;<br> }<br> .hover<br> {<br> 배경색: #5dd354;<br> }<br> .정렬<br> {<br> 배경색: #ded070;<br> }<br> .페이지번호<br> {<br> 색상: 블랙; <br> 여백:2px 10px;<br> 패딩:2px 5px;<br> }<br> .활성<br> {<br> 테두리:단색 1px 빨간색;<br> 배경색:#76a7d2;<br> }<br> .페이저<br> {<br> 여백-하단:10px;<br> 여백-왼쪽:20px;<br> }<br> </스타일><br> <script type="text/javascript" 언어="javascript" src="js/jquery1.3.2.js"></script><br> <script type="text/javascript" 언어="javascript"><br> $(함수() {<br> jQuery.fn.alternateRowColors = function() { //사용 가능한 형식<br> $('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变color 奇数行<br> $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变color 偶数行<br> 이것을 돌려주세요;<br> };<br> $('table.myTable').each(function() {<br> var $table = $(this); //将table存储为一个jquery对象<br> $table.alternateRowColors($table); //현재 排序时隔行变color<br> $('번째', $table).each(함수(열) {<br> var findSortKey;<br> if ($(this).is('.sort-alpha')) { //按字母排序<br> findSortKey = 함수($cell) {<br> return $cell.find('sort-key').text().toUpperCase() '' $cell.text().toUpperCase();<br> };<br> } else if ($(this).is('.sort-numeric')) { //按数字排序<br> findSortKey = 함수($cell) {<br> var key =parseFloat($cell.text().replace(/^[^d.]*/, ''));<br> 반환 isNaN(key) ? 0 : 키;<br> };<br> } else if ($(this).is('.sort-date')) { //按日期排序<br> findSortKey = 함수($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(함수() {<br> //反向排序状态声明<br> var newDirection = 1;<br> if ($(this).is('.sorted-asc')) {<br> newDirection = -1;<br> }<br> var 행 = $table.find('tbody>tr').get(); //将数据行转换为数组<br> $.each(행, 함수(색인, 행) {<br> row.sortKey = findSortKey($(row).children('td').eq(column));<br> });<br> 행.정렬(함수(a, b) {<br> if (a.sortKey < b.sortKey) return -newDirection;<br /> if (a.sortKey > b.sortKey) return newDirection;<br> 0을 반환합니다;<br> });<br> $.each(행, 함수(색인, 행) {<br> $table.children('tbody').append(행);<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> if (newDirection == 1) {<br> $sortHead.addClass('sorted-asc');<br> } 그 밖의 {<br> $sortHead.addClass('sorted-desc');<br> }<br> //사용할隔行变color의 函数<br> $table.alternateRowColors($table);<br> //移除已排序的列的样式,添加样式到当前列<br> $table.find('td').removeClass('sorted').filter(':nth-child(' (열 1) ')').addClass('sorted');<br> $table.trigger('repaginate');<br> });<br> }<br> });<br> });<br> });<br> //分页<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> });<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 페이지 = 0; 페이지 < numPages; 페이지 ) {<br /> $('<span class="page-number"></span>').text(1페이지)<br> .bind('클릭', { newPage: 페이지 }, function(event) {<br> currentPage = event.data['newPage'];<br> $table.trigger('페이지 다시 매기기');<br> $(this).addClass('active').siblings().removeClass('active');<br> }).appendTo($pager).addClass('clickable');<br> }<br> $pager.insertBefore($table);<br> $table.trigger('페이지 다시 매기기');<br> $pager.find('span.page-number:first').addClass('active');<br> });<br> });<br> <br> </머리><br> <br> <form id="form1" runat="server"><br> <div><br> <table class="myTable paginated"><br> <br> <tr><br> <th class="sort-alpha"><br> 성<br> </일><br> <th class="sort-alpha"><br> 이름<br> </일><br> <일><br> 이메일<br> </일><br> <th class="sort-numeric"><br> 마감<br> </일><br> <th class="sort-date"><br> 날짜<br> </일><br> <일><br> 웹사이트<br> </일><br> </tr><br> </머리><br> <본체><br> <tr><br> <td><br> 티미스<br> </td><br> <td><br> 에른<br> </td><br> <td><br> eth@gmail.com<br> </td><br> <td><br> $34.00<br> </td><br> <td><br> 2009년 14일<br> </td><br> <td><br> ftp://www.baidu.com<br> </td><br> </tr><br> <tr><br> <td><br> TT미쓰<br> </td><br> <td><br> 비존<br> </td><br> <td><br> jsmith@gmail.com<br> </td><br> <td><br> $50.00<br> </td><br> <td><br> 2009년 3월<br> </td><br> <td><br> ftp://www.baidu.com<br> </td><br> </tr><br> <tr><br> <td><br> CS스미스<br> </td><br> <td><br> 존<br> </td><br> <td><br> DDDD@gmail.com<br> </td><br> <td><br> $50.00<br> </td><br> <td><br> 2009년 3월<br> </td><br> <td><br> http://www.jb51.net<br> </td><br> </tr><br> <tr><br> <td><br> 스미스<br> </td><br> <td><br> 존<br> </td><br> <td><br> sdsf@gmail.com<br> </td><br> <td><br> $50.00<br> </td><br> <td><br> f32 2009<br> </td><br> <td><br> ffttp://www.jb51.net<br> </td><br> </tr><br> </본체><br> </테이블><br> </div><br> </양식><br> </본문><br> </div>