>웹 프론트엔드 >JS 튜토리얼 >sortElements를 사용하여 테이블 정렬을 구현하는 단계에 대한 자세한 설명

sortElements를 사용하여 테이블 정렬을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言
php中世界最好的语言원래의
2018-04-26 09:23:161862검색

이번에는 sortElements가 테이블 정렬을 구현하는 단계에 대해 자세히 설명하겠습니다. sortElements가 테이블 정렬을 구현하는 주의사항은 무엇인가요?

jquery.tablesorter, 크기는 17KB이지만 홈페이지에는 IE10에서 일부 호환성 문제가 있습니다.

페이징, 검색 및 기타 기능을 갖춘 강력한 75KB 크기의 데이터 테이블.
sortElements라는 플러그인도 있는데, 매우 작고 3KB에 불과하며 호환성이 좋고 Github에서 별 818개를 받았습니다.
결국 sortElements를 사용하기로 결정했고 구현은 매우 간단합니다.
1. jQuery

<script type="text/
javascript
" src="jquery.js"></script>

2를 소개합니다. sortElements.js

<script type="text/javascript" src="jquery.sortElements.js"></script>

3.html 코드를 소개합니다

$(document).ready(function(){ 
var table = $(&#39;#mytable&#39;);//table的id 
$(&#39;#sort_header&#39;)//要排序的headerid 
.each(function(){ 
var th = $(this), 
thIndex = th.index(), 
inverse = false; 
th.click(function(){ 
table.find(&#39;td&#39;).filter(function(){ 
return $(this).index() === thIndex; 
}).sortElements(function(a, b){ 
return $.text([a]) > $.text([b]) ? 
inverse ? -1 : 1 
: inverse ? 1 : -1; 
}, function(){ 
return this.parentNode; 
}); 
inverse = !inverse; 
}); 
}); 
});

4. 이 기사의 사례를 읽고 나면 당신이 그것을 마스터했다고 믿습니다. 더 흥미로운 방법을 알고 싶다면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!

추천 도서:

jquery는 테이블 정렬 + 실시간 검색 기능을 구현합니다.


jQuery는 원형 아이콘 메뉴 회전 전환 기능을 만듭니다.

위 내용은 sortElements를 사용하여 테이블 정렬을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.