본문 바로가기
미디어위키

Help Sortable tables

by 다움위키 2024. 12. 6.

원문 보기: https://dawoum.duckdns.org/wiki/Help:Sortable_tables

 

정렬 가능한 테이블을 만들기 위해, 테이블에 sortable 클래스를 추가합니다. 이 클래스는 각 헤더 셀 내의 헤더 옆에 표시되는 화살표를 추가합니다. 화살표를 클릭하면 선택한 열에 따라 테이블 행이 정렬됩니다. 화살표를 계속 클릭하면 다음 패턴으로 정렬 순서가 변경됩니다: 오름차순, 내림차순, 및 정렬 안 함. 다른 열에서 화살표를 Shift-키를 누른 채로 클릭함으로써 보조 정렬을 수행할 수 있습니다.

각 shift 클릭은 클릭한 열을 기준으로 2차 정렬을 설정하고, 이 기능은 3차 이상의 추가 정렬까지 확장됩니다.

Sort modes

항목은 헤더 아래의 처음 몇 행의 데이터 유형을 기준으로 정렬됩니다. 데이터 유형을 결정하기 위해, 헤더 아래의 처음 다섯 개의 비어 있지 않은 행을 페이지 로딩 시 검사하고 가장 적합한 형식을 선택합니다. 불일치가 발생할 수 있습니다. 추가적으로, 아래 관련 섹션에서 설명한 대로 특정 열의 정렬 순서를 강제로 지정할 수 있습니다.

현재, span 또는 sup와 같은 태그는 데이터 유형이 결정되는 방식에 영향을 미치지 않지만 참조 번호와 표시되는 주석은 영향을 미칩니다.

Dates

다양한 날짜 형식이 허용되며, 지역 언어로 된 월 이름이 있는 형식도 허용됩니다. 예를 들어, 독일어 위키피디아에서 "16. März 2010"은 2010-03-16으로 적절하게 정렬됩니다.

마침표, 쉼표, 아포스트로피, 또는 슬래시 (예를 들어, . , ' /)와 같은 다양한 구분 기호가 있는 것을 포함하여 다양한 숫자 형식이 지원됩니다. 영어 위키피디아는 전형적으로 미국 날짜 형식 (예를 들어, 월-일-년)을 사용합니다.

Numbers

스크립트는 십진 분리 기호로 "." 또는 ","를 사용하는 숫자와 과학적 표기법 ("e" 또는 "E" 사용)으로 작성된 숫자를 감지할 수 있습니다. 기본적으로, 숫자는 기본적으로 영숫자 순서에 따라 정렬되며, 그것들은 숫자 값이 아닌 문자열로 정렬될 것임을 의미합니다. 이로 인해 "10" 뒤에 "9"가 오는 등 예상치 못한 정렬이 발생할 수 있습니다. 어쨌든, 원하는 경우 이 기본 동작을 덮어쓸 수 있습니다.

Text

목록이 미디어위키에 의해 사전순으로 정렬될 때, 문자 순서는 Intl.Collator 정렬됩니다. 이것은 PageContentLanguage를 기반으로 악센트가 있는 문자를 올바르게 정렬합니다.

안드로이드 Webview는 이를 지원하지 않으므로, 이전 정렬 루틴으로 폴백해야 합니다. 순서는 유니코드 코드 포인트 순서와 같습니다. 가장 공통적인 문자 중 일부는 다음과 같이 정렬됩니다 (오름차순):

Forcing the sort mode of a column

헤더에 data-sort-type="..."을 추가하여 테이블 정렬 방식을 제어할 수 있습니다. 이 기능은 tablesorter.com (webarchive)에서 파생되었습니다. "data-sort-type"에 대한 유효한 값은 대소문자를 구분하지 않는 다음 값을 포함합니다:

  • currency
  • number
  • isoDate
  • time
  • IPAddress
  • usLongDate
  • date
  • text
  • url

예를 들어:

Wikitext

{|class="wikitable sortable"
!data-sort-type="date"| Date !! Name !! Height !!data-sort-type="number"| Salary
|-
| 01.10.1977 || Smith || 1.85 || 1,000.000
|-
| 11.6.1972 || Ray || 1.89 || 900.000
|-
| 1.9.1992 || Bianchi || 1.72 || 2,000.50
|}

Rendering

Specifying a sort key

필요에 따라 셀이 정렬되거나 구문 분석되는 방식을 조정할 수 있습니다. 예를 들어, 셀에 "John Smith"라고 쓰여 있지만 "Smith"로 정렬해야 하면, data-sort-value="..." 속성을 사용하여 이를 달성할 수 있습니다.

Wikitext

{|class="wikitable sortable"
! Name and Surname !! Height
|-
|data-sort-value="Smith, John"| John Smith || 1.85
|-
|data-sort-value="Ray, Ian"| Ian Ray || 1.89
|-
|data-sort-value="Bianchi, Zachary"| Zachary Bianchi || 1.72
|}

Rendering

Controlling sorting and display

특정 텍스트가 정렬되지 않지만 여전히 표시되도록 보장하기 위해, data-sort-type="..."를 사용합니다. 그런 다음 "200 approx" 또는 "100[1]"과 같이 값 뒤에 추가적인 텍스트를 덧붙일 수 있습니다. 빈 셀은 "-Infinity"로 정렬됩니다. 셀에 날짜 또는 숫자 범위 (예를 들어, 2~5)가 포함되면, data-sort-value="..."를 사용합니다.

Examples

첫 번째 열은 일반 숫자를 정렬합니다. 두 번째 열은 테이블 헤더에서 data-sort-type="number"를 사용하여 더 많은 컨텐츠를 숫자로 정렬합니다. 네 번째 열은 data-sort-value="..."를 사용하여 셀 내용과 독립적으로 숫자 정렬 값을 정의합니다.

미디어위키에서 쉼표 (,)와 집진 점 (.)이 표시되는 방식은 언어 설정에 따라 달라집니다. 통화 기호와 백분율 (%) 기호는 이들 설정에 따라 숫자로 정렬됩니다.

Secondary sort key

열별로 데이터를 정렬할 수 있으며, 열 A를 주요 정렬 키로 사용합니다. 열 A에 같은 값이 있으면, 열 B를 보조 키로 사용합니다. 열 A의 정렬 버튼을 한 번 또는 두 번 클릭하고, 그런-다음 shift를 누른 상태에서 열 B의 정렬 버튼을 한 번 또는 두 번 클릭하여 더욱 세분화합니다.

예를 들어:

먼저 "텍스트" 열을 클릭하고, 그런-다음 shift 키를 누른 채로 "숫자" 열을 클릭합니다. 항목이 먼저 텍스트를 기반으로 정렬되고 그 다음에 숫자를 기반으로 정렬되어 있음을 알 수 있습니다.

Additional features

Excluding the last row from sorting

테이블을 class="sortbottom"으로 표시함으로써 그것의 마지막 행을 정렬하지 않아도 됩니다. 느낌표 (!)로 바닥글로 선언하면 정렬에서 제외할 수도 있습니다.

Wikitext

{|class="wikitable sortable"
! Name !! Surname !! Height
|-
| John || Smith || 1.85
|-
| Ron || Ray || 1.89
|-
| Mario || Bianchi || 1.72
|- class="sortbottom"
! !! Average: || 1.82
|}

Rendering

Excluding the first row from sorting

class="sorttop"을 사용함으로써 첫 번째 행을 제외할 수 있습니다.

Wikitext

{|class="wikitable sortable"
! Name !! Surname !! Height
|- class="sorttop"
! !! Average: || 1.82
|-
| John || Smith || 1.85
|-
| Ron || Ray || 1.89
|-
| Mario || Bianchi || 1.72
|}

Rendering

Making a column unsortable

열의 정렬을 중지하기 위해, 헤더 셀의 속성에 class="unsortable"을 사용합니다.

Wikitext

{|class="wikitable sortable"
! Numbers !! Alphabet !! Dates !! Currency !!class="unsortable"| Unsortable
|-
| 1 || Z || 02-02-2004 || 5.00 || This
|-
| 2 || y || 13-apr-2005 || || Column
|-
| 3 || X || 17.aug.2006 || 6.50 || Is
|-
| 4 || w || 01.Jan.2005 || 4.20 || Unsortable
|-
| 5 || V || 05/12/2006 || 7.15 || See?
|-
! Total: 15 !! !! !! Total: 29.55 !!
|-
|}

Rendering

Keeping some rows together

열이 없는 행이 정렬 방식에 상관없이 항상 위에 있는 열이 있는 행보다 아래에 있도록 하기 위해, 행의 속성에 class="expand-child"를 사용합니다.

Wikitext

{| class="wikitable sortable"
!style="width:9em"| Country !!data-sort-type="number"| Area
|-
| France
| 674 843 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| In Paris is the Eiffel Tower.
|-
| U.K.
| 242 495 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| In the U.K. you cannot pay with euros.
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| And you drive on the left side of the road.
|-
| Germany
| 357 168 km²
|- class="expand-child" style="font-size:85%; line-height:1.2; color:gray"
|colspan="2"| Germany includes the former DDR.
|}

Rendering

data-sort-value에 위의 행과 같은 컨텐츠를 넣으면, 이 행도 함께 유지합니다. 이들 행들의 원래 상호 순서는 유지됩니다. 이를 위한 더 나은 방법은 expand-child를 클래스화하는 것입니다. 위의 #Keeping some rows together를 참조하십시오.

data-sort-value가 사용되는 예는 네덜란드에 대한 행의 경우입니다:

{|class="wikitable sortable"
! Country/province !! Capital
|-
| France || Paris
|-
| Netherlands || Amsterdam
|-
|data-sort-value="Netherlands"| South Holland ||data-sort-value="Amsterdam"| The Hague
|-
| U.K. || London
|}

Rendering

Special dates

공통 기원 (BCE) 이전의 연도를 나타내기 위해, BCE 연도를 10,000에서 빼십시오. 예를 들어, -62 BCE는 10,000 - 62 = 9938이 됩니다.

예를 들어, September 23, 62 BCE는 9938-09-23로 표현됩니다.

테이블 열에 불완전한 날짜가 있으면, 정렬은 문제가 되지 않습니다. 연도와 월만 제공되면, 해당 월의 첫 날 전에 정렬됩니다. 마찬가지로, 연도만 제공되면, 해당 연도의 첫 달 또는 첫 날 전에 정렬됩니다.

Wikitext

{| class="wikitable sortable"
|-
! Date
|-
| 2022-01-01
|-
| 2023-12-31
|-
| 2024
|-
| 2024-04
|-
| 2024-04-00
|-
| 2024-05
|-
| 2024-05-00
|}

Rendering

Using #time

파서 함수 #time과 HTML 태그를 사용하여 특정 날짜 범위를 표시할 수 있습니다. 표시된 날짜 앞에 HTML 태그 <span style="display:none">&{{#expr:3e11+{{#time:U|..}}}}</span>를 추가하여, 날짜가 표시되는 방식을 조작할 수 있습니다. 이 방법은 그레고리력을 사용하여 서기 111년 1월 1일과 서기 9999년 12월 31일 사이의 날짜에 적용됩니다. 추가된 값은 모든 값이 양수이고 길이가 균일하도록 보장합니다. 표현식 앞에 "&"를 배치하여 문자열 정렬 모드가 강제로 적용됩니다.

날짜와 시간에 대해 PHP 형식을 사용하여 날짜와 시간을 입력할 수 있습니다. 연도만 지정하면, 백그라운드에 월 (보통 1월)을 포함해야 합니다.

예를 들어 날짜를 사용하여:

서기 111 이전의 날짜를 사용하기 위해, 모든 연도에 400의 배수 (예를 들어, 6000)를 추가합니다. 이렇게 하면 범위가 -5889년 1월 1일 00:00:00에서 시작하여 3999년 12월 31일 23:59:59에 끝나며 달력 시스템은 변경되지 않습니다.

다음도 참조하십시오:

Cell spanning multiple rows/cells

여러 행이나 열에 걸쳐 있는 셀은 동일한 값을 갖는 여러 셀이 있는 것과 동등한 것으로 고려됩니다.

행의 끝에 있는 임의의 누락된 셀은 첫 번째 정렬 이후에 빈 셀로 바뀝니다.

Colspanned cells

정렬 모드는 colspanned 셀을 포함하는 각 열에 대해 별도로 감지됩니다. 헤더에 data-sort-type을 포함함으로써 모든 colspanned 열에 대한 정렬 모드를 설정할 수 있습니다.

열이 확장된 셀 내의 각 열에 대해 별도의 정렬 키를 구현하기 위해, 여기에 설명된 CSS 트릭을 활용하십시오. 정렬 가능한 열에 대해 각 행에 같은 수의 셀을 유지하십시오. 만약 불일치가 있으면, 모든 열이 정렬 가능해집니다. 이 규칙은 마지막 정렬 가능한 열을 포함하고 그것까지 적용되어야 합니다. 어쨌든, CSS 해결 방법을 사용하면 행에 표시된 셀 수와 공식 셀 수의 차이를 허용할 수 있습니다. 예를 들어, 첫 번째 열의 너비를 조정하고 두 번째 셀의 내용을 왼쪽으로 이동하고 너비를 같은 측정값만큼 늘리고 전형적으로 표시되는 셀 테두리를 숨기면 두 개의 공식 셀이 하나로 표시될 수 있습니다. 숨겨진 정렬 키를 사용하여 각 열과 관련하여 특정 행의 정렬 순서를 관리할 수 있습니다.

예를 들어:

Static column

행 번호를 갖는 것과 같은 정적 열을 만들기 위해, 서로 옆에 배치된 두 개의 테이블을 사용합니다. 두 테이블에서 각 행이 같은 높이를 가져야 합니다. 또 다른 테이블을 만드는 대신 w:Template:Static row numbers를 사용하여 CSS를 사용하여 암묵적으로 행 번호를 생성할 수도 있습니다.

서식을 수정하여 모든 것을 통합된 테이블로 표시할 수 있습니다. 행이 셀에서 텍스트에 비해 너무 짧으면, 브라우저가 확장하여, 정렬을 방해합니다.

Default order

사용자가 클릭하지 않고 열별로 정렬된 테이블을 표시할 수 없습니다. 기본적으로, 테이블 행은 위키텍스트와 같은 순서로 나타납니다. 특정 열별로 정렬된 테이블을 표시하기 위해, 위키텍스트를 그에 맞게 정렬해야 합니다. 이를 수행하는 한 가지 방법은 다음과 같습니다:

  1. 꼭대기 줄과 바닥 줄 없이 테이블의 위키텍스트를 다시 정렬합니다.
  2. "find and replace"를 사용함으로써 "|"를 포함하지 않는 고유 코드로 셀 구분 기호를 바꿉니다.
  3. 테이블 셀 내의 임의의 파이프를 코드로 바꾸고, 그런-다음 해당 코드를 그것 앞에 줄바꿈 문자로 대체합니다 (새 행의 시작을 나타냄).
  4. Special:ExpandTemplates에서 Sort 모듈을 사용합니다. 파이프 사이의 항목을 정렬하고 원하는 구분 기호를 생성하기 위해, 템플릿을 확장하고 위키텍스트 앞에 {{#invoke:Sort|f||- (줄바꿈을 가짐)와 위키텍스트 뒤에 }}를 추가합니다.
  5. "-"와 줄바꿈으로 시작하는 항목을 삭제합니다.
  6. 셀 구분 기호와 셀 내부의 파이프에 대한 임시 코드를 변경하여 복원합니다.

이 정렬 방법은 각 행에서 위키텍스트에 의존하며, 주로 첫 번째 열의 컨텐츠에 따라 정렬합니다. 두 번째 열은 보조 키 역할을 합니다. 어쨌든, 컨텐츠 앞의 첫 번째 열 셀에 있는 위키텍스트 코드는 순서에 영향을 미칠 수 있습니다.

JavaScript를 사용하여 테이블이 로드될 때 자동으로 테이블을 정렬하기 위해 Snippets/Sort table on reload 기능을 사용할 수도 있습니다.

Persistent sort states using cookies

Snippets/Persistent sort order를 사용하여 다시 로드해도 정렬 가능한 테이블의 상태를 저장할 수 있습니다.

See also

Other examples:

 

 

 

관련글

티스토리툴바