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

테이블 정렬 구성 요소 tablesorter를 사용하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-24 13:52:11
원래의
2152명이 탐색했습니다.

이번에는 tablesorter 컴포넌트 사용 단계에 대해 자세히 설명하고, table sorting 컴포넌트 tablesorter 사용 시 주의사항은 무엇인지 살펴보겠습니다.

1. 파일을 가져옵니다.

<script type="text/
javascript
" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.tablesorter.js"></script> 
<!-- 引入以下样式则表头出现排序图标,同时引入图片 --> 
<link href="css/style.css" rel="stylesheet" type="text/css" >
로그인 후 복사

효과는 그림과 같습니다.
테이블 정렬 구성 요소 tablesorter를 사용하는 단계에 대한 자세한 설명
2. 표준 HTML 테이블에는 thead 및 tbody 태그가 포함되어야 합니다.

<table id="myTable" class="tablesorter"> 
<thead> 
<tr> 
<th>Name</th> 
<th>Sex</th> 
<th>Address</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>zhangsan</td> 
<td>boy</td> 
<td>beijing</td> 
</tr> 
<tr> 
<td>lisi</td> 
<td>girl</td> 
<td>shanghai</td> 
</tr> 
<tr> 
...略 
</tr> 
</tbody> 
</table>
로그인 후 복사

3. 추가 지침:

사용 과정에서 발생한 문제는 홈 페이지를 정렬할 때 문제가 없이 테이블 데이터를 가져오는 것입니다. 이전 페이지의 데이터가 다시 표시됩니다. 이 문제를 해결하려면 ajax가 데이터를 얻은 후 "update" 이벤트가 트리거됩니다. 코드는 다음과 같습니다.

$(
document
).ready(function(){ 
//第一列不进行排序(索引从0开始) 
$.tablesorter.defaults.headers = {0: {sorter: false}}; 
$(".tablesorter").tablesorter(); 
});
로그인 후 복사

위 문제는 오랫동안 Pager 플러그인을 사용하기 시작했습니다. 공식 웹 사이트를 방문하여 이것이 적합하지 않다는 것을 발견했습니다.
온라인에서 정보를 확인하고 다음 코드를 정리했습니다.
$(".tablesorter").trigger("update");
로그인 후 복사
그래서 모두 사용했습니다. 오랜 테스트 끝에 $(".tablesorter").trigger("update")만 문제를 해결할 수 있다는 것을 알았습니다

다른 것들은 어떤지 모르겠습니다.

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

jQuery가 테이블의 데이터를 작동하는 방법에 대한 자세한 설명

JQuery 테이블을 작동하는 기술은 무엇입니까

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

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿