English version of this page

Datatabell

Slik lager du datatabell med filtrering/søk, blaing og sortering

Slik gjør du

  1. Åpne redigeringsmodus for artikkelen og velg kildevisning av feltet som tabellen ligger i.
  2. Sett innstillingen class="datatable" etter starten på tabell-koden: 
    <table class="datatable">
  3. Informasjon i kolonnene for sortering blir automatisk detektert

Merk at dette ikke kan kombineres med klassen "sortable" siden datatable har sin egne innebygde sortering, og at sortering i datatable stiller krav til at dataene i samme kolonne har samme format.

Innstillinger du kan sette på tabell

Legges inn etter "class"="datatable" etter starten på tabell-koden.

Sortering ved lasting

Første kolonne starter på 0. Sorteringsrekkefølge må skrives:

  • &quot;asc&quot; (stigende)
  • &quot;desc&quot; (synkende)

Ingen

data-order="[]"

Første kolonne stigende (default)

data-order="[[ 0, &quot;asc&quot; ]]"

Første kolonne stigende og så andre kolonne synkende

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

Sortere miks av tall og tekst

Kolonner som skal sortere miks av tall og tekst må eksplisitt defineres. Eks. første kolonne:

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

Antall viste rader pr. side og meny

10 (default), 25, 50 eller 100 kan settes.

data-page-length="25"

Hvis du ønsker f.eks. "5" rader må du også overstyre valg i menyen, f.eks.:

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

Skru av

Blaing

data-paging="false"

Filtrering/søk

data-filter="false"

Sortering for tabell

data-orderable="false"

Info for søk/blaing

data-info="false"

Innstillinger du kan sette på tabellheader

Skru av sortering for kolonne

data-orderable="false"

Eksempler på bruk

Vanlig

  • "datatable"
Tall Tekst Tall med komma Datoer Datoer
10 Lucy Smiths hus 10,60 10/10/2010 10 oktober 2010
100000 Helga Engs Hus 100 20/11/2011 20 november 2011
50 Fysikkbygningen 100,60 01/02/1998 1 februar 1998
-90 Observatoriet 10 09/10/2010 9 oktober 2010
1 Harald Schjelderups hus 1000,60 02/05/2010 2 mai 2010
22 Georg Sverdrups hus 10,30 05/02/2010 5 februar 2010
12 Kristine Bonnevies hus 1,0 05/02/2012 5 februar 2012
14 Observatoriet 11,10 21/01/2012 21 januar 2012
-1 Fysikkbygningen 0,1 05/12/1998 5 desember 1998
0 Harald Schjelderups hus 0,0 12/05/1998 12 mai 1998
-10 Georg Sverdrups hus 0,0 10/08/2010 10 august 2010
-2 Fysikkbygningen 99,99 10/05/1997 10 mai 1997
1000 Observatoriet 15,15 11/05/1997 11 mai 1997

Sortert synkende siste kolonne ved lasting

  • "datatable"
  • "zebra"
  • data-order="[[4, &quot;desc&quot;]]"
Tall Tekst Tall med komma Datoer Datoer
10 Lucy Smiths hus 10,60 10/10/2010 10 oktober 2010
100000 Helga Engs Hus 100 20/11/2011 20 november 2011
50 Fysikkbygningen 100,60 01/02/1998 1 februar 1998
-90 Observatoriet 10 09/10/2010 9 oktober 2010
1 Harald Schjelderups hus 1000,60 02/05/2010 2 mai 2010
22 Georg Sverdrups hus 10,30 05/02/2010 5 februar 2010
12 Kristine Bonnevies hus 1,0 05/02/2012 5 februar 2012
14 Observatoriet 11,10 21/01/2012 21 januar 2012
-1 Fysikkbygningen 0,1 05/12/1998 5 desember 1998
0 Harald Schjelderups hus 0,0 12/05/1998 12 mai 1998
-10 Georg Sverdrups hus 0,0 10/08/2010 10 august 2010
-2 Fysikkbygningen 99,99 11/05/1997 11 mai 1997
1000 Observatoriet 15,15 11/05/1997 11 mai 1997

Uten blaing og sortert synkende 4 kolonne og så stigende 2 kolonne ved lasting

  • "datatable"
  • "zebra"
  • data-order="[[3, &quot;desc&quot;], [1, &quot;asc&quot;]]"
Tall Tekst Tall med komma Datoer Datoer
10 Lucy Smiths hus 10,60 10/10/2010 10 oktober 2010
100000 Helga Engs Hus 100 20/11/2011 20 november 2011
50 Fysikkbygningen 100,60 01/02/1998 1 februar 1998
-90 Observatoriet 10 09/10/2010 9 oktober 2010
1 Harald Schjelderups hus 1000,60 02/05/2010 2 mai 2010
22 Georg Sverdrups hus 10,30 05/02/2010 5 februar 2010
12 Kristine Bonnevies hus 1,0 05/02/2012 5 februar 2012
14 Observatoriet 11,10 21/01/2012 21 januar 2012
-1 Fysikkbygningen 0,1 05/12/1998 5 desember 1998
0 Harald Schjelderups hus 0,0 12/05/1998 12 mai 1998
-10 Georg Sverdrups hus 0,0 10/08/2010 10 august 2010
-2 Fysikkbygningen 99,99 11/05/1997 11 mai 1997
1000 Observatoriet 15,15 11/05/1997 11 mai 1997

Overstyrt rader pr. side (inkl. meny) og ikke sortert ved lasting

  • "datatable"
  • "zebra"
  • data-order="[]"
  • data-page-length="5"
  • data-length-menu="[[5, 10, 25, -1], [5, 10, 25, &quot;Alle&quot;]]"
Tall Tekst Tall med komma Datoer Datoer
10 Lucy Smiths hus 10,60 10/10/2010 10 oktober 2010
100000 Helga Engs Hus 100 20/11/2011 20 november 2011
50 Fysikkbygningen 100,60 01/02/1998 1 februar 1998
-90 Observatoriet 10 09/10/2010 9 oktober 2010
1 Harald Schjelderups hus 1000,60 02/05/2010 2 mai 2010
22 Georg Sverdrups hus 10,30 05/02/2010 5 februar 2010
12 Kristine Bonnevies hus 1,0 05/02/2012 5 februar 2012
14 Observatoriet 11,10 21/01/2012 21 januar 2012
-1 Fysikkbygningen 0,1 05/12/1998 5 desember 1998
0 Harald Schjelderups hus 0,0 12/05/1998 12 mai 1998
-10 Georg Sverdrups hus 0,0 10/08/2010 10 august 2010
-2 Fysikkbygningen 99,99 11/05/1997 11 mai 1997
1000 Observatoriet 15,15 11/05/1997 11 mai 1997

Støttede detekterte og sorterbare datoformater (norsk og engelsk)

Dato må legges inn før måned også på engelsk.

Se alle støttede datoformater

  • 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)

(hvis har ønsker til flere datoformater fra mulighetene i Moment.js dokumentasjonen kan spille det inn til vortex-hjelp@usit.uio.no)

Publisert 29. des. 2021 11:20 - Sist endret 4. mars 2022 10:43
Del på e-post