Komponenter og elementer du kan sette inn

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

Bruker https://datatables.net/ (og Moment plugin for datoformater)

Bare funksjonaliteten under er støttet (andre HTML5 data-attributter osv. på eget ansvar)

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

3. Informasjon i kolonnene for sortering blir automatisk detektert

Obs: Kan ikke kombineres med klassen "sortable" siden datatable har sin egne innebygde sortering
Merk: 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 (<table...).

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.

  • 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 20. feb. 2018 14:15 - Sist endret 20. feb. 2018 17:23
Del på e-post