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