jquery_jquery를 기반으로 한 테이블 정렬-JS 튜토리얼-php.cn

많은 전문가들이 직접 해보고 싶어서 jquery용 특수 정렬 라이브러리도 작성했습니다.
물론 실행 속도는 정말 받아들일 수 없지만 천천히 개선하겠습니다.
참고: 다음은 코드의 일부입니다. 데모를 확인하세요.
문서가 로드된 후 'th'에 클릭 이벤트를 추가하세요.
1.
$('th').click(function(){
var date1=(new Date()).getTime()
var dataType=$(this).attr( 'dataType');
클릭한 개체의 사용자 정의 속성 dataType을 찾습니다. 물론 이는 W3C 표준을 준수하지 않으며 ID나 클래스로 정의할 수도 있지만 이 점이 직관적이라고 생각합니다. Transitional 모드에서도 사용할 수 있습니다.
2.
var index=$('th').index(this)
문서에서 클릭한 개체의 위치를 찾습니다. 그리고 1을 추가합니다. 1을 추가하는 것은 클릭한 개체의 위치를 제공하는 것입니다. 이는 해당 열의 td에 스타일을 추가하여 수행됩니다.
:eq()를 사용하면 td의 전체 문서 위치만 가져올 수 있기 때문입니다. :nth-child()를 사용하면 자체 상위 요소에서 각 td를 가져올 수 있습니다.
3.
var row=$('tbody tr')
tbody의 모든 tr 을 변수 행에 저장합니다. .
4.
$.each(row, function(i){ arr[i]=row[i] })
모든 행을 탐색하여 arr 배열에 삽입합니다. >5.if($(this).hasClass('select')) {arr.reverse()}
이 'th'를 클릭하면 선택 스타일이 추가됩니다. 원래 arr 배열은 직접 반전됩니다.
else { <.>arr.sort(sortStr(index,dataType))
$('.select').removeClass(); :nth-child(' index ')').addClass(' select');
$(this).addClass('select')
}
그렇지 않으면 sort() 메서드를 사용하여 arr을 정렬하세요. sort() 메소드는 1개의 함수를 허용하며, 이 함수는 2개의 함수를 허용합니다. 여기서는 두 개의 매개변수가 있는
sortStr()
으로 정의합니다. >

코드 복사

코드는 다음과 같습니다.

function sortStr(index,dataType){ return function( a,b){ var aText=$(a).find(' td:nth-child(' index ')').text() var bText=$(b).find(' td:nth-child(' index ')').text();

if(dataType!='roomType'){

aText=Parse(aText,dataType) 
bText=Parse (bText,dataType) 
return aText>;;bText?-1:bText> ;aText?1:0 

} 
else return aText.localeCompare(bText) 
} 

 

첫 번째는 index 이며, 클릭 이벤트에서 얻은 변수입니다. 이 변수에는 문서에서 클릭된 '번째' 위치, 즉 숫자가 포함됩니다. 
Jquert의 index() 메소드는 객체의 위치를 ​​가져옵니다. 이 위치는 0부터 시작합니다. 이 예에는 6개의 '번째'가 있습니다. 

두 번째 매개변수는 각 항목의 속성 값을 포함하는 dataType입니다. '일'. 

sortStr()에는 비교 함수가 포함되어 있습니다. 이 함수에는 2개의 매개변수가 있습니다. 각 매개변수는 'tbody tr'을 나타냅니다. (여기서 a와 b는 비교해야 하는 tr을 나타냅니다.) 이 두 매개변수는 이를 포함하는 함수 환경에서 얻습니다. sort() 메서드의 매개변수는 함수입니다. 

이 익명 함수는 작업 배열 Quote를 반환합니다.
arr에는 배열이 포함되어 있습니다. 각 배열의 값에는 tbody의 tr에 대한 참조가 포함되어 있습니다. 정렬 함수는 반환된 값에 따라 원래 배열의 요소 위치를 직접 변경합니다. $(a).find('td:nth-child(' index ')').text();
비교해야 하는 행의 td 중 하나에 포함된 텍스트를 가져옵니다.
클릭 이벤트에서 얻은 인덱스 변수가 매개변수가 되어 여기에 전달되어 th에 해당하는 td의 위치를 가져옵니다.

code

코드는 다음과 같습니다.

if(dataType!='roomType'){

aText=Parse(aText,dataType) bText =Parse(bText,dataType) return aText>;bText?-1:bText>;aText?1:0; } 정렬해야 하는 유형이 숫자와 문자를 포함하지 않음(roomType 값이 있기 때문에 요소에 숫자와 문자가 포함됨), 변환을 위해 획득한 td의 텍스트 값과 dataType을

Parse()에 전달,

코드 복사

코드는 다음과 같습니다.

function Parse(data,dataType){

switch(dataType){ case 'num': returnparseFloat(data)||0 case 'date': return Date.parse(data)||0 default: return SplitStr(data)

}

}

숫자 유형을 부동 소수점 숫자로 직접 변환하는 경우

parseFloat(data)||0을 반환합니다.
Boone의 변환 개체 문자열이 나타나면 이 문서에 A NaN이 포함되어 있으므로 0을 반환합니다. 변환할 수 없으므로 0이 반환됩니다.

날짜 유형인 경우 Date.parse를 사용하여 직접 숫자로 변환할 수 있습니다. 이 변환은 변환 매개변수의 시간인
이것은 초 단위로 정확할 수 있는 시간 변환을 시도했습니다. 예를 들어 1971/01/2 18:12:20, 01/2/1970 18:12:20은
그런 다음
로 변환할 수 있습니다.
return aText>;bText?-1:bText>;aText?1:0;
aText가 bText보다 큰 비교 값을 반환합니다. 0보다 작은 숫자를 반환합니다. 반대로 양수를 반환합니다. 둘 다 해당되지 않으면 0을 반환합니다. ; 날짜도 숫자도 아닌 경우(현재 이 문서에서는 3가지 유형의 데이터만 변환할 수 있습니다: 1. 날짜. 2. 숫자. 3. 문자열과 숫자 함께),
기본값:
return SplitStr(data )
변환을 위해 SplitStr()에 넣었습니다

splitStr()의 내용은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

 
function SplitStr(data){ 
var re=/^[$a-zA -zu4e00-u9fa5 ]*(.*?)[a-zA -zu4e00-u9fa5 ]*$/ 
data=data.replace(re,'$1') 
parseFloat(data) 반환 
} 

정규식: 세 부분으로 나누어 1부분^[a-zA-Z]*; 중간 부분(.*?) 끝 부분 [a-zA-Z]*$
이렇게 볼 수 있습니다/ /컨테이닝 블록입니다.
첫 번째 ^ 부분은 대상 문자열의 시작을 의미하고, []는 대소문자에 관계없이 A~Z를 무시하고 공백이 있음을 의미합니다. * 왼쪽에 있는 [] 안의 내용은 여러 번 나타날 수 있음을 의미합니다.
중간 부분()은 그룹이며, 그룹화된 내용은 RegExp '$1', '.'의 첫 번째 항목에 배치됩니다. 모두 일치(공백 제외) *?
마지막 부분 []은 다음과 동일합니다. * 첫 번째 부분은 모두 제거되고, $는 일치하는 $ 기호를 나타냅니다. 🎜>

코드 복사 코드는 다음과 같습니다.

function sortStr(index,dataType){

return function(a,b){ 
var aText=$(a).find('td:nth-child(' index ')' ).text() 
var bText=$(b ).find('td:nth-child(' index ')').text(); 
if(dataType!='roomType'){ 
aText=Parse(aText,dataType) 
bText =Parse(bText,dataType) 
return aText>;bText?-1:bText>;aText?1:0; 
} 
 else return aText.localeCompare(bText) 
} 
 } 

 
 그렇지 않으면 비교를 위해 localeCompare를 직접 사용하십시오. 이는 다음과 같이 문자열을 비교하는 특별한 방법입니다. 문자열 'a' 반환된 문자열 'b'보다 앞에 순위가 매겨집니다. 숫자는 여전히 0보다 큰 숫자, 음수 및 0입니다. 

코드 시작 부분의 새 날짜와 끝 부분의 새 날짜는 테이블 정렬 시간으로 계산되며, 이 시간은 'span'에 표시됩니다. 가운데 'th' 표시는 정렬 시작부터 정렬 종료까지 전체 테이블 정렬에 걸리는 시간을 테스트하기 위한 것입니다.

전체 코드:

코드 복사 코드는 다음과 같습니다.

<머리>

表格排序

返回文章

인기 추천

최신 강좌

최신 다운로드

더>

웹 효과

웹사이트 소스 코드

웹사이트 자료

프론트엔드 템플릿

房号	日期	房间类型	床位	容量	价格/晚	合计
u0628	9/14/2008	Std Hotel Room 2 Double (27 left)	2	4 人	$109.00	$436.00
u0631	10/4/2008	Lodge Rm/Shared Bath Q (4 left)	1	2 人	$109.00	$436.00
u0636	9/18/2008	Std Hotel Room Q (34 left)	1	2 人	$117.00	$466.00
u0638	9/19/2008	Std Hotel Room 2 Q (28 left)	2	4 人	$117.00	$466.00
u0612	9/1/2008	Studio Condo (10 left)	1	4 人	$149.00	$596.00
u0626	9/13/2008	Hotel Jr Suite K (4 left)	1	2 人	$149.00	$596.00
u0641	9/22/2008	Hotel Superior K (26 left)	1	2 人	$149.00	$596.00
u0602	8/31/2008	1 Bdrm Condo K (96 left)	1	4 人	$169.00	$676.00
u0616	10/8/2008	Studio Condo Murphy (5 left)	NaN	4 人	$169.00	$676.00
u0623	10/2/2008	Studio Cabin Q (6 left)	1	2 人	$169.00	$676.00
u0633	9/16/2008	Studio Q/Murphy (6 left)	2	4 人	$169.00	$676.00
u0637	10/5/2008	Lodge Room Q (4 left)	1	2 人	$169.00	$676.00
u0622	9/11/2008	Hotel Loft Ste K/Q (3 left)	2	4 人	$179.00	$716.00
u0629	10/10/2008	1 Bdrm Condo K (76 left)	1	4 人	$179.00	$716.00
u0603	9/8/2008	Hotel Loft K/Q (16 left)	2	4 人	$189.00	$756.00
u0632	9/15/2008	Hotel Loft K/2T (15 left)	3	4 人	$189.00	$756.00
u0619	10/1/2008	Studio Cabin Firepl K (6 left)	1	2 人	$209.00	$836.00
u0608	10/7/2008	1 Bdrm Condo with Den K (1 left)	1	6 人	$222.00	$886.00
u0620	9/5/2008	2 Bdrm Condo K/K (25 left)	2	6 人	$229.00	$916.00
u0630	9/7/2008	2 Bdrm Condo K/2T (57 left)	3	6 人	$229.00	$916.00
u0634	10/11/2008	2 Bdrm Condo K/Q (88 left)	2	6 人	$229.00	$916.00
u0639	9/20/2008	1 Bdrm K/Murphy (19 left)	2	4 人	$229.00	$916.00
u0614	9/2/2008	2 Bdrm Townhome (7 left)	2	4 人	$239.00	$956.00
u0610	9/10/2008	1 Bdrm Loft K/Q+2T/Murphy (5 left)	5	8 人	$269.00	$1076.00
u0625	9/12/2008	2 Bdrm K/Q/Murphy (6 left)	3	6 人	$269.00	$1076.00
u0640	9/21/2008	Exec. 2 Bdrm K/2Q/Murphy (2 left)	4	8 人	$269.00	$1076.00
u0606	9/26/2008	2 Bdrm Cabin K/Q+T (2 left)	3	5 人	$279.00	$1116.00
u0613	9/29/2008	Lodge 2 Bdrm Suite Q/Q (1 left)	2	4 人	$279.00	$1116.00
u0624	10/3/2008	1 Bdrm Cabin Firepl K (3 left)	1	4 人	$279.00	$1116.00
u0618	9/4/2008	2 Bdrm Condo w/Den Custom (1 left)	2	6 人	$329.00	$1316.00
u0627	10/9/2008	3 Bdrm Condo K/Q/Q (6 left)	3	8 人	$339.00	$1356.00
u0642	9/23/2008	2 Bdrm Cabin Firepl K/Q+T (1 left)	3	7 人	$339.00	$1356.00
u0615	9/3/2008	3 Bdrm Condo K/Q/2T (2 left)	4	8 人	$379.00	$1516.00
u0607	9/9/2008	2 Bdrm. Loft K/Q/Q,3T/SS (9 left)	6	11 人	$389.00	$1556.00
u0609	9/27/2008	Dlx 1 Bdrm Cabin Firepl K (3개 남음)	1	4인	$389.00	$1556.00
u0635	2008년 9월 17일	Exec 2 Bdrm Lft K/K/2Q/SS (1개 남음)	4	10인	$399.00	$1596.00
u0621	2008년 9월 6일	3베드룸 타운홈(3개 남음)	3	6인	$409.00	$1636.00
u0601	2008년 9월 24일	3베드룸 캐빈 K/Q T/2T(1개 남음)	5	9인	$469.00	$1876.00
u0605	2008년 9월 25일	Dlx 1Bd Loft,K,Q/T Firepl (1 남음)	3	6인	$469.00	$1876.00
u0611	2008년 9월 28일	Dlx 2 Bdm Cbn Firepl K/2T (3개 남음)	2	6인	$469.00	$1876.00
u0604	2008년 10월 6일	디럭스 3베드룸 콘도 K/Q/Q(남은 2개)	3	8인	$499.00	$1996.00
u0617	2008년 9월 30일	Dlx3Bdm/2Bth/FP/K/QT/QT(1개 남음)	5	8인	$549.00	$2196.00