Wikia

Narutopedia

Help:Sorting

Talk0

Sortable tables have the ability to sort table rows based on the values inside a specific column. This is done through class="sortable".

Note that sortable tables use JavaScript for sorting, and does not currently work on the mobile skin. If you want to sort by multiple columns, hold down Shift when you sort your second column.

Basics

Making a table sortable is easy since all that is required is appending the "sortable" class. However, certain situations such as sorting with numbers or using a table footer, require extra input, as detailed further down the page.

{| class="article-table sortable"
!First Name
!Last Name
!Favorite Color
|-
|Ben
|Benny
|Brown
|-
|John
|Smith
|Green
|-
|Smith
|John
|Maroon
|}

results in:

First Name Last Name Favorite Color
Ben Benny Brown
John Smith Green
Smith John Maroon

Advanced sorting

data-sort-type

By default, columns are sorted in ASCII order. This isn't a problem in most cases, but can be quite problematic when sorting numbers, as 10, 20, 100 will be sorted as 10, 100, 20 (since it sorts it by the first "letter" first, rather than numerically). This can be fixed using the "data-sort-type" attribute on column row headers.

data-sort-type="..." can contain multiple different values, but the most common ones are:

  • text
  • number - Expects a numerical value, points, commas, spaces, "+", or "-".
  • currency - Expects a number with $, £, €, or ¥ in front (ex: $100, ¥10000)
  • date

Note that if each cell in the column does not have a value of the correct type, there is a chance sorting for the whole column will go back to default.

Example:

{| class="article-table sortable"
!Default
!data-sort-type="number"|Number
!data-sort-type="currency"|Currency
|-
|!@#$%
|10
|$23
|-
|10000
|20
|¥54
|-
|Apple
|100
|£345
|-
|Banana
|200
|€999
|}

which results in:

Default Number Currency
!@#$% 10 $23
10000 20 ¥54
Apple 100 £345
Banana 200 €999

data-sort-value

Sometimes what you want to show in a column doesn't correspond to what order you would like it sorted by. In cases such as these data-sort-value="..." is used.

Example:

{| class="article-table sortable"
!Console
!Color
!Stock
|-
|Dreamcast
|White
| data-sort-value="5"|Five
|-
|iPad
|White
| data-sort-value="0"|Zero
|-
|Xbox
|Green
| data-sort-value="8"|Eight
|}

which results in:

Console Color Stock
Dreamcast White Five
iPad White Zero
Xbox Green Eight

Unsortable columns

If you have a table where you want one of the columns to not be sortable, you can do this by adding the class "unsortable" to its header.

Example:

{| class="article-table sortable"
|-
!Game
!Theme
! class="unsortable" |Rating
|-
|Pocket League Story
|futbol
|☆☆
|-
|Game Dev Story
|vidya gamez
|☆☆☆
|-
|Grand Prix Story
|cars
|☆
|}

becomes the following table:

Game Theme Rating
Pocket League Story futbol ☆☆
Game Dev Story vidya gamez ☆☆☆
Grand Prix Story cars

Table footer

If you don't wish for a row at the bottom of a table to be sorted (such as a "totals" row), this can be accomplished by adding class="sortbottom" to the row.

Example:

{| class="article-table sortable"
!Name
!Sex
!Age
|-
|Amanda
|Female
|12
|-
|Bill
|Male
|23
|-
|Cathryn
|Male
|34
|- class="sortbottom"
!colspan="2"|Average
|23
|}

would produce:

Name Sex Age
Amanda Female 12
Bill Male 23
Cathryn Male 34
Average 23

See also

Further help and feedback

Around Wikia's network

Random Wiki