Data table

This is how you do it

1. Go into edit mode of the article and choose source view of the field where the table is located
2. Set the setting class="datatable" after the start of the table code:

   <table class="datatable"> 
   

3. Information in the columns for sorting is automatically detected

Note that this can not be combined with the class "sortable" since data table has its own inbuilt sorting. Sorting in data table requires that data in the same column have the same format.

Settings you can set on tables

Entered after "class"="datatable" after the start of the table code.

Sorting when loading

The first column starts at 0. Order of sorting must be written:

• "asc" (ascending)
• "desc" (descending)

None

data-order="[]"

First column ascending (default)

data-order="[[ 0, "asc" ]]"

First column ascending and second column descending

data-order="[[ 0, "asc" ], [ 1, "desc" ]]"

Sort a mix of numbers and text

Columns for sorting a mix of numbers and text must be explicitly defined. For example, first column:

data-column-defs="[{ type: "natural", targets: 0 }]"

Number of rows shown on a page and menu

10 (default), 25, 50 or 100 can be set.

data-page-length="25"

If you want "5" rows, you have to override selection in the menu, for example:

data-length-menu="[[5, 10, 25, -1], [5, 10, 25, "Alle"]]"

Turn off

Browsing

data-paging="false"

Filtering/ search

data-filter="false"

Sorting for table

data-orderable="false"

Info for search/ browsing

data-info="false"

Settings you can set on the table header

Turn off column sorting

data-orderable="false"

Examples in use

Normal

• "datatable"

Sorted last descending column when loading

• "datatable"
• "zebra"
• data-order="[[4, "desc"]]"

Without browsing and sorted descending 4 columns and then ascending 2 columns when loading

• "datatable"
• "zebra"
• data-order="[[3, "desc"], [1, "asc"]]"

Overridden rows per page (incl. menu) and not sorted when loading

• "datatable"
• "zebra"
• data-order="[]"
• data-page-length="5"
• data-length-menu="[[5, 10, 25, -1], [5, 10, 25, "Alle"]]"

Supported detected and sortable date formats (Norwegian and English)

Date must be entered before the month, same applies in English.

See all supported date formats

• DD.MM.YY
• DD/MM/YY
• DD-MM-YY
• DD.MM.YYYY
• DD/MM/YYYY
• DD-MM-YYYY
• DD MMMM YYYY
• DD MMM YYYY
• D MMMM YYYY
• D MMM YYYY
• DD. MMMM YYYY
• DD. MMM YYYY
• D. MMMM YYYY
• D. MMM YYYY
• YYYY
• HH:mm
• HH:mm:ss
• ddd (ukedag kort)
• dddd (ukedag lang)
• X (Unix timestamp)
• x (Unix timestamp ms)

(if you have requests for more date formats that those available in Moment.js documentation fra mulighetene i Moment.js dokumentasjonen you can contact vortex-hjelp@usit.uio.no)