add site
services
publishers
database
health videos
toolbar
stats
live show
health store
more stuff
JOIN/LOGIN
| advertise add site services publishers database health videos
| | about toolbar stats live show health store more stuff JOIN/LOGIN |
Tables can be made sortable via client-side JavaScript with A sortable table is identified by the arrows in each of its header cells. Clicking them will cause the table rows to sort based on the selected column, in ascending order first, and subsequently toggling between ascending and descending order. Links and other wiki-markup are not possible in headers. Note that all of the below is subject to change due to improvements in the script. [edit] JavaScriptThe JavaScript code wikibits.js has on each site a copy at {{SERVER}}/skins-1.5/common/wikibits.js, on this site http://en.wikipedia.org/skins-1.5/common/wikibits.js. In addition a site may have a page MediaWiki:Common.js which adds and overrides some code. [edit] Sort modesThe sort modes (the data types, which, in addition to the choice "ascending" or "descending", determine the sorting order) are as follows; in the given order (as soon as there is a match, subsequent criteria are not applicable, e.g., 24-12-2007 is a date, not a number. For the criteria, tags (e.g. span, sup, sub) are ignored.
The sort mode is determined by the table element that is currently in the first non-blank row below the header. In the case of different data types within one column (according to the criteria mentioned above) the sort mode may change after sorting, which can give a cycle of four or even more instead of two. This is confusing and gives undesired sorting orders, so that can better be avoided. However, it can be complicated to assess whether an element can ever be at the top after any sorting operations on the same and other columns, and this can also change after deleting a row, or adding a column. Therefore it is wise to make sure that every element matches the criterion for the required data type. Using a row template this can be done very conveniently. An alternative method of making sure the sort mode of each column is as desired, is creating a first row that determines the sort modes, but in such a way that this row is not displayed and is excluded from sorting, see below. [edit] ExamplesText after a number (e.g. a footnote) does not affect the sorting order, if the sorting mode is numeric. However, if the number at the top has text after it, this makes the sorting mode alphabetic.
The example with "a" gives alphabetic sorting; that with "e" ditto, the data are not mistaken for numbers in scientific format.
The first example demonstrates that text is positioned at zero, and that e.g. e3 for 1000 is not allowed; use 1e3 instead. It also shows that "-" should be used, not "−". The second example shows that expressions are not sorted according to their evaluated value, but according to the first number. The third example shows that a percentage is accepted for numeric sorting mode, but ignored in the actual sorting, so if a column contains percentages, all numbers have to be written as a percentage. The fourth example shows again that "ca. 12" sorts at 0, as opposed to 12 with some text after it, which sorts at 12. In case such an element arrives at the top of a column, it causes alphabetic sorting mode. [edit] Additional features[edit] Excluding rows from sortingSometimes it is helpful to exclude the last row of a table from the sorting process. This can be achieved using Wiki markup {|class="wikitable sortable" !Name!!Surname!!Height |- |John||Smith||1.85 |- |Ron||Ray||1.89 |- |Mario||Bianchi||1.72 |-class="sortbottom" |||Average:||1.82 |} What it looks like in your browser
More generally, one or more lines at the bottom marked with
The first row of a table can be made unsortable by marking every row other than the first with Wiki markup {|class="wikitable sortable" !Name!!Surname!!Height |- |''(brief)''||''(from records)''|| |-class="sortbottom" |John||Smith||1.85 |-class="sortbottom" |Ron||Ray||1.89 |-class="sortbottom" |Mario||Bianchi||1.72 |} What it looks like in your browser
The first unsortable row can also be a hidden row, with each element marked with [edit] Making a column unsortableIf you want a specific column not to be sortable, specify Wiki markup {|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? |-class="sortbottom" !Total: 15!!!!!!Total: 29.55!! |- |} What it looks like in your browser
[edit] StripingThe JavaScript that makes tables sortable adds tr.odd { background-color: silver; } tr.even { background-color: gold; } It is also possible to define an #stripe tr.odd { background-color: silver; } #stripe tr.even { background-color: gold; } In this case, only tables with If a user sorts the table according to a different column, the stripes still alternate. I.e., the stripes are specific to the positions of the rows in the sorted table, not to the positions of the rows in the wikitext. [edit]You can apply sorting using a key which due to CSS is not displayed:
Example:
Javascript sorting sorts the text inside and outside the tags, without the tags themselves. A hidden key can be put at the start. Both in the case of alphabetic and that of numeric sorting the first parts determine the order. Both parts together are used to determine the sort mode, so for numeric sorting the whole should be a valid number. [edit]The key comes at the start and is separated from the displayed text in such a way that the latter does not affect the sorting order. For example, if there are no blank spaces in any key, then a blank space can be used for separation. If a single blank space is possible in a key, two nbsps can be used. For table elements for which the text to be displayed is equal to the key, no duplication is needed, of course. If the text inside and outside the tags together is of a form that would cause a sorting mode other than alphabetic (if and when the element is at the top), a character can be appended at the end of the key to avoid this, again making sure it does not affect the sorting order by putting a space or two nbsps. This can be dispensed with if the element can never be at the top, but this can be complicated to assess as that can be caused by sorting other columns, with varying sorting modes, and it can change when deleting a row, adding a column, etc. Instead of "display=none" another way is using a font color equal to the background, e.g. <font color="#f9f9f9">999</font> gives "999". With this method the hidden code can be seen in selected text (e.g. with the mouse). Also the hidden text is included when copying the rendered text. The first may be an advantage or a disadvantage, the second seems only a disadvantage. A complication is also that if a user uses a background color different from the default, the specified text color may not match it; to make sure they are the same the background color can be specified also. [edit]If one needs to use alphabetic sort mode for numbers, one can construct a hidden alphabetic key for this purpose. This can be done for all numbers between -1e100 and 1e100 in arbitrary precision as follows:
In the following the left column shows the code for alphabetic sorting, where cryptic followed by the regular notation. The second column contains the same (hence sorting the same), but with code hidden with CSS. The third column does not contain hidden parts and uses numeric sort mode. When sorting the first or second column "more than 1e9" is positioned suitably, while when sorting the third column it is positioned like 0. Moreover, if this cell would be at the top alphabetic sort mode would be used.
[edit] PaddingSometimes entries are padded on the left for alignment purposes. This can adversely affect how they are sorted. [edit] Non-breaking spacesThe effect of left-padding with "
See also w:Talk:List_of_U.S._states_by_population#Sortable_Table. [edit] Padding with zerosExample:
Formatnum can be combined with padleft: Integer: {{formatnum:{{padleft:299792458|16|0}}}} gives:
Real: {{formatnum:{{padleft:{{#expr:((299792458.056 - .5) round 0)}}|16|0}}}}.{{padleft:{{#expr:(1000000*(299792458.056 - ((299792458.056 - .5) round 0))) round 0}}|6|0}} gives:
[edit] DatesThe sort mode is based on the rendered format; in the case of links: the labels, not the targets (though including any content hidden by "display:none"). See also: [edit] Date sort mode
One of the formats allowed for the date sort mode is produced by the Mediawiki's date-formatting feature in the right combination of preference and wikitext format: we need to use in the wikitext the format [[dd mmm]] [[yyyy]] (done in the example) and either no preference or preference dmy, or use with preference dmy one of the formats [[mmm dd]][[yyyy]], [[yyyy]][[mmm dd]], or [[yyyy]][[dd mmm]]. Incomplete dates:
[edit] String sort mode
String sort mode provides chronological sorting for dates formated as <span style="display:none">&</span>YYYY-MM-DD; the hidden "&" avoids numeric sort mode. Also we can hide the YYYY-MM-DD and put after that any choice of displayable text, including Mediawiki date formatting. The Wikipedia template Template:dts (backlinks, edit) provides a convenient way of applying this method while using the date-formatting feature for display. For years BC we can use, for example, If a table column contains any or all incomplete dates, this will not cause sorting problems. If only a year and month are given, that incomplete date is positioned alphabetically before the first day of the month in question. Likewise, if only a year is given, the date is positioned before the first month or day given for that year. If at some point (i.e., after possible previous sorting) the form [edit] Secondary keyIf a column contains a value multiple times then sorting the column preserves the order of the rows within each subset that has the same value in that column (stable sorting). Thus sorting based on a primary, secondary, tertiary, etc. key can be done by sorting the least-significant key first, etc. First click on column Alphabet and then on Numbers, you'll see that the ordering is on Numbers (1), Alphabet (2).
[edit] Keeping some rows togetherPartly hidden keys can be used to keep certain rows together. The original mutual order of these rows is preserved. Example where this is the case for the rows about the Netherlands:
[edit] LimitationsJavascript sorting may not work properly on tables with cells extending over multiple rows and/or columns (however, sorting of columns up to and including the first with colspan does not seem to be affected). Also, while cells can be empty, they should not be missing at the end of a row. In these cases sometimes the table gets messed up when attempting to sort, while other times some of the sorting buttons work while others don't. [edit] Colspan workaroundTo allow sorting, the formal number of cells in each row should be equal (if not all columns are made sortable this should apply at least for the number of cells up to and including the last sortable column). However, with a CSS hack the number of cells shown in a row can differ from the formal number of cells. For example, two formal cells can be shown as one by specifying a width for the first column, shifting the contents of the second cell to the left, increasing its width by the same amount, and hiding the cell border that would normally be visible. Hidden keys can be used to control, for sorting with respect to each column, how this row should be sorted. Example:
This can be combined with the method of "keeping some rows together" demonstrated above. For an example of an application of this, consider a table of three columns where the third column would make the table too wide, such as a column of miscellaneous details. These details can be put in separate rows, each staying below the corresponding row when the table is sorted. Example:
A table row template makes this technique less cumbersome to apply, see e.g. w:List of furry conventions, w:Template:Furry-con-list-start and w:Template:Furry-con-list-entry. [edit] Controlling sorting and displayText undesired for sorting but needed for display:
Text undesired for display but needed for sorting:
Combining the two, we can have displayed text independent of text used for sorting, by fully hiding the latter, and fully putting the former in a separate column (in date sorting mode and numeric sorting mode) or in the same column after the hidden text (in alphabetic sorting). Fully putting the displayed text in a separate column may look ugly if it is not done consistently for a whole column, but only for elements that require this (e.g. if most entries in a column are single numbers, but some are ranges). [edit] Static columnA static column, e.g. with row numbers, can be obtained with two side-by-side tables with for each row the same height set in both tables:
The style can be adjusted to make it appear as a single table. If for some row the height of that row is too small for the text in a cell on one of the sides, the browser increases it, and there is no longer a match. A static column can also be created by enclosing the sortable table with the templates {{static column begin}} and {{end}}. See the documentation of {{static column begin}} for details. [edit] Sorting tables by defaultIt is not possible to make a table appear sorted by a certain column without the user clicking on it. By default, the rows of a table always appear in the same order as in the wikitext. If you want a table to appear sorted by a certain column, you must sort the wikitext itself in that order; see the next section for one way to do this. [edit] Sorting the wikitext of a tableOne way to sort the wikitext itself by a certain column is to use the following trick. You can make an auxiliary sortable table containing the wikitext for the original table, and sort it. You can then replace the original wikitext by this sorted wikitext. Example: Original table:
Auxiliary table: {|class="wikitable sortable"
|} Now you can sort the above table, and copy the rendered text to the edit box. After deleting the "header" line, this renders as a new defaultly sorted table:
[edit] Alphabetic sorting orderSort the following table to see an example of the alphabetic sort order. Note that sorting is case-insensitive: the two-character entries such as A1 demonstrate that A and a are at the same position.
[edit] Browser issuesWith older versions of Safari a table can only be sorted by the first column: all sort buttons have the effect that only the leftmost one is supposed to have. [edit] Notes
[edit] See also
Examples elsewhere:
|
| ↑ top of page ↑ | about thumbshots |
