부트스트랩에서 테이블 헤더를 클릭하여 정렬하는 방법

Bootstrap을 사용하면 반응형 웹 페이지를 빠르게 만들 수 있습니다. 때로는 프로젝트에서 Bootstrap을 사용하여 오름차순 및 내림차순 정렬을 구현합니다. Bootstrap 테이블이 테이블 헤더 필드 상단에 열 헤더의 오름차순 및 내림차순 정렬을 구현하는 단계를 자세히 기록합니다.

1. 부트스트랩을 소개합니다.

부트스트랩 공식 홈페이지에서 최신 버전의 부트스트랩 프레임워크를 다운로드하고, 프로젝트에 사용된 CSS 스타일과 js 스크립트를 소개해보세요.

그 중 3가지 기본 파일이 도입되어야 합니다:

①bootstrap.min.css

②jquery.min.js

#🎜 🎜#③bootstrap.min.js

부트스트랩 스크립트는 jQuery 라이브러리에 의존하기 때문에 ②가 ③보다 먼저 도입되어야 한다는 점에 유의하세요.

2 DataTables 플러그인을 소개합니다.

구현하려는 기능은 Bootstrap 테이블 헤더 열 헤더를 클릭하여 오름차순과 내림차순을 전환하는 기능이므로 개발 과정에서 이 우수한 테이블 보기 플러그인을 선택했습니다. .

프로젝트에서 DataTables를 사용하려면 세 개의 파일만 추가하면 됩니다:

①jQuery

②DataTables.js

#🎜🎜 #3DataTables

3. 부트스트랩 테이블 컨테이너 DOM을 만듭니다.

Bootstrap은 필요에 따라 추가할 수 있는 다양한 스타일의 테이블 클래스를 제공합니다. 예를 들어 제가 작성한 table class="table table-striped table-bordered"입니다. 아래 그림은 Bootstrap 테이블의 DOM은 헤더 열 헤더를 클릭하여 테이블을 오름차순과 내림차순으로 전환하는 것입니다.

4. 동적으로 부트스트랩 테이블 그리드를 생성합니다.

데이터 테이블 제어 요소의 그리드 레이아웃으로 DOM을 정의합니다. "sDom" 속성 값은 실제 프로젝트 요구에 따라 작성될 수 있습니다. 헤더 열 헤더를 클릭하면 오름차순과 내림차순으로 정렬된 그리드가 전환됩니다.

5 DataTable "sWrapper" 클래스를 확장합니다.

"sWrapper": "dataTables_wrapper form-inline"을 통해 sWrapper 클래스를 확장하고 요소가 데이터 테이블 형식이 아닌 인라인이 되도록 요소를 데이터 테이블 형식으로 래핑할 수 있습니다. 블록을 구현하여 클릭 부트스트랩을 구현합니다. 테이블의 헤더 열 헤더는 오름차순 및 내림차순 정렬 기능을 구현합니다.

6. 부트스트랩 테이블 테이블 헤더 열 헤더를 클릭하여 오름차순 및 내림차순으로 전환합니다.

Bootstrap은 테이블 정렬기를 테이블 라이브러리 및 결과 정렬 클래스로 사용하지 않았기 때문에 관련 CSS 스타일을 직접 작성하여 효과를 얻었습니다.

효과는 다음과 같습니다.

#🎜 🎜#

부트스트랩과 관련된 더 많은 기술 기사를 보려면 Bootstrap Tutorial

열을 방문하여 알아보세요!

위 내용은 부트스트랩에서 테이블 헤더를 클릭하여 정렬하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!