이번에는 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" >
효과는 그림과 같습니다.
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(); });
$(".tablesorter").trigger("update");
다른 것들은 어떤지 모르겠습니다.
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 테이블 정렬 구성 요소 tablesorter를 사용하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!