jQuery 테이블 정렬 구성 요소 테이블 정렬기 사용법 example_jquery

1. 파일 가져오기

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

" rel="stylesheet" type="text/css" >

효과는 그림과 같습니다:

2 . 표준 HTML 테이블에는 thead 및 tbody 태그가 포함되어야 합니다

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

이름 성별 주소 ;/td> 소년 ; 상하이 ...약간 ;

3. 테이블을 정렬 가능하게 설정

코드 복사

코드는 다음과 같습니다.

$(document).ready(function(){ //첫 번째 열은 정렬되지 않습니다(색인은 0부터 시작)

$.tablesorter .defaults.headers = {0: {sorter: false}}; $(".tablesorter").tablesorter() })

공식 문서 : http://tablesorter.com/docs/ 추가 설명:

사용 중 문제가 발생했습니다. 내 테이블 데이터를 ajax를 통해 얻어서 홈페이지에서 처리합니다. 정렬 시에는 문제가 없습니다.

다음 페이지를 정렬할 때 이전 페이지의 데이터가 다시 표시됩니다. 이 문제를 해결하려면

데이터를 얻은 후 "업데이트"를 실행하세요. with ajax "이벤트 코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.

$ (".tablesorter").trigger ("update");

위의 문제로 인해 저는 오랫동안 공식 웹사이트에서 Pager 플러그인을 사용하기 시작했습니다. 적합하지 않다는 것을 발견했습니다. 온라인에서 정보를 확인하고 다음 코드를 컴파일했습니다.

코드 복사

코드는 다음과 같습니다

$ (".tablesorter tbody tr").addClass("delete") $(".tablesorter tbody tr.delete").remove()

$("table tbody ").append(html) ; $(".tablesorter").trigger("appendCache"); $(".tablesorter").trigger("update"); $(" .tablesorter").trigger( "sorton",[[[2,1],[0,0]]]);

그래서 모두 사용했습니다. 오랜 테스트 끝에, $(".tablesorter" ).trigger("update"); 이 문장만이 문제를 해결할 수 있다는 것을 알았습니다

다른 내용은 무엇인지 모르겠습니다.

필수 파일 다운로드 주소 : http://xiazai.jb51.net/201405/yuanma/jquery.tablesorter.zip

style.css 및 themesblue 아래의 사진 경로.