tables_jquery의 로컬 정렬을 구현하는 jquery 메서드-JS 튜토리얼-php.cn

이 문서의 예에서는 jquery가 테이블의 로컬 정렬을 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 구현 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다. jquery 表格排序 머리 { 배경색: 파란색; 색상: 흰색; } tr.odd { 배경색: #ddd; } tr.even { 배경색: #eee; } .클릭 가능 { 텍스트 장식: 밑줄; } .hover { 배경색: #5dd354; } .정렬 { 배경색: #ded070; } .페이지번호 { 색상: 블랙; 여백:2px 10px; 패딩:2px 5px; } .활성 { 테두리:단색 1px 빨간색; 배경색:#76a7d2; } .페이저 { 여백-하단:10px; 여백-왼쪽:20px; } $(함수() { jQuery.fn.alternateRowColors = function() { //사용 가능한 형식 $('tbody tr:odd', this).removeClass('even').addClass('odd'); //隔行变color 奇数行 $('tbody tr:even', this).removeClass('odd').addClass('even'); //隔行变color 偶数行 이것을 돌려주세요; }; $('table.myTable').each(function() { var $table = $(this); //将table存储为一个jquery对象 $table.alternateRowColors($table); //현재 排序时隔行变color $('번째', $table).each(함수(열) { var findSortKey; if ($(this).is('.sort-alpha')) { //按字母排序 findSortKey = 함수($cell) { return $cell.find('sort-key').text().toUpperCase() '' $cell.text().toUpperCase(); }; } else if ($(this).is('.sort-numeric')) { //按数字排序 findSortKey = 함수($cell) { var key =parseFloat($cell.text().replace(/^[^d.]*/, '')); 반환 isNaN(key) ? 0 : 키; }; } else if ($(this).is('.sort-date')) { //按日期排序 findSortKey = 함수($cell) { return Date.parse('1 ' $cell.text()); }; } if (findSortKey) { $(this).addClass('clickable').hover(function() { $(this).addClass('hover'); }, function() { $(this).removeClass('hover'); }) .click(함수() { //反向排序状态声明 var newDirection = 1; if ($(this).is('.sorted-asc')) { newDirection = -1; } var 행 = $table.find('tbody>tr').get(); //将数据行转换为数组 $.each(행, 함수(색인, 행) { row.sortKey = findSortKey($(row).children('td').eq(column)); }); 행.정렬(함수(a, b) { if (a.sortKey if (a.sortKey > b.sortKey) return newDirection; 0을 반환합니다; }); $.each(행, 함수(색인, 행) { $table.children('tbody').append(행); row.sortKey = null; }); $table.find('th').removeClass('sorted-asc').removeClass('sorted-desc'); var $sortHead = $table.find('th').filter(':nth-child(' (열 1) ')'); //实现反向排序 if (newDirection == 1) { $sortHead.addClass('sorted-asc'); } 그 밖의 { $sortHead.addClass('sorted-desc'); } //사용할隔行变color의 函数 $table.alternateRowColors($table); //移除已排序的列的样式,添加样式到当前列 $table.find('td').removeClass('sorted').filter(':nth-child(' (열 1) ')').addClass('sorted'); $table.trigger('repaginate'); }); } }); }); }); //分页 $(function() { $('table.paginated').each(function() { var currentPage = 0; var numPerPage = 10; var $table = $(this); $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 = $(' '); for (var 페이지 = 0; 페이지 $(' ').text(1페이지) .bind('클릭', { newPage: 페이지 }, function(event) { currentPage = event.data['newPage']; $table.trigger('페이지 다시 매기기'); $(this).addClass('active').siblings().removeClass('active'); }).appendTo($pager).addClass('clickable'); } $pager.insertBefore($table); $table.trigger('페이지 다시 매기기'); $pager.find('span.page-number:first').addClass('active'); }); });

성 이름 이메일 마감 날짜 웹사이트 티미스 에른 eth@gmail.com $34.00 2009년 14일 ftp://www.baidu.com TT미쓰 비존 jsmith@gmail.com $50.00 2009년 3월 ftp://www.baidu.com CS스미스 존 DDDD@gmail.com $50.00 2009년 3월 http://www.jb51.net 스미스 존 sdsf@gmail.com $50.00 f32 2009 ffttp://www.jb51.net