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

이번에는 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 = $('#mytable');//table的id 
$('#sort_header')//要排序的headerid 
.each(function(){ 
var th = $(this), 
thIndex = th.index(), 
inverse = false; 
th.click(function(){ 
table.find('td').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 중국어 웹사이트의 기타 관련 기사를 참조하세요!