Datatable cards: Difference between revisions

Latest revision as of 09:06, 26 November 2024

The following demonstrates the use of Datatables with the paramater datatables-cards=true. If the results exceed the standard limit (100 items) the table/cards will be automatically navigable using Ajax. SearchPanes can also be simultaneously used.

This page contains the following components:

a popup form to create new gods (completed with picture)
a query with format datatable and datatables-cards=true in order to show items as cards
the following templates:
- Template:Demo_VisualData/Datatable cards/cards.css (used to style the cards)
- Template:GodsPicture (wikitext to display the card picture)
- Template:GodsAction (wikitext to display the card action: it contains a VisualData form to edit the relevant card data)

form is loading...

{{#visualdataform: Gods
|title = Add god
|action = create
|edit-page = 
|return-page = Demo_VisualData/Datatable_cards
|view = popup
|popup-size = medium
|css-class =
|pagename-formula = Demo_VisualData/Datatable cards/<name>
|edit-freetext = false	
|edit-categories = false
|edit-content-model = false
|edit-target-slot = false
|target-slot = main
|default-categories = 
|default-content-model = wikitext
|preload=
|preload-data=
|layout-align = top
|popup-help = false 
|submit-button-text =
|layout = tabs
|submit-button-text =
|validate-button-text =
}}

(see the docs here)

The single cells of the table can be styled using the "data-label" attribute as follows:

.visualdata.datatable.cards td[data-label="picture"] {
  display: block;
  text-align: center;
}

(see Template:Demo_VisualData/Datatable cards/cards.css for the complete style)

The following templates are applied to specific printouts with the syntax |template?picture=GodsPicture or |template?action=GodsAction

Template:GodsPicture (wikitext to display the card picture)
Template:GodsAction (wikitext to display the card action: it contains a VisualData form to edit the relevant card data)

<templatestyles src="Demo_VisualData/Datatable cards/cards.css" /> 

{{#visualdataquery:[[name::+]]  
|schema=Gods 
|format=datatable   
|pagetitle= 
|?action=
|?picture
|?name
|?description
|?url=
|template?picture=GodsPicture
|template?action=GodsAction
|datatables-cards=true
|order=name asc
}}

(see the docs here, note that the printouts with an empty alias, like action= or url= are used to ensure that the property is available within templates, without showing it)

action	name	description
form is loading...	Aglaea	one of the three Charites in Greek mythology, also called the Gratiae (Graces) in Roman mythology.
form is loading...	Amicitia	friendship
form is loading...	Anteros	the god of requited love (literally "love returned" or "counter-love") and also the punisher of those who scorn love and the advances of others, or the avenger of unrequited love.
form is loading...	Ares	the Greek god of war and courage. He is one of the Twelve Olympians, and the son of Zeus and Hera
form is loading...	Aristaeus	the mythological culture hero credited with the discovery of many rural useful arts and handicrafts, including bee-keeping --
form is loading...	Artemis	the goddess of the hunt, the wilderness, wild animals, nature, vegetation, childbirth, care of children, and chastity

source/idea: http://playground-mw.bitplan.com/

Datatable cards: Difference between revisions

Latest revision as of 09:06, 26 November 2024

See also

Navigation menu

@@ Line 1: / Line 1: @@
-{{#visualdataform: Gods
+The following demonstrates the use of Datatables with the paramater <code>datatables-cards=true</code>. If the results exceed the standard limit (100 items) the table/cards will be automatically navigable using Ajax. SearchPanes can also be simultaneously used.
+This page contains the following components:
+* a popup form to create new gods (completed with picture)
+* a query with format <code>datatable</code> and <code>datatables-cards=true</code> in order to show items as cards
+* the following templates:
+** [[Template:Demo_VisualData/Datatable cards/cards.css]] (used to style the cards)
+** [[Template:GodsPicture]] (wikitext to display the card picture)
+** [[Template:GodsAction]] (wikitext to display the card action: it contains a VisualData form to edit the relevant card data)
+{{#visualdataform: Gods
 |title = Add god
 |action = create
 |edit-page =
-|return-page = Gods
+|return-page = Demo_VisualData/Datatable_cards
 |view = popup
 |popup-size = medium
@@ Line 23: / Line 34: @@
 |submit-button-text =
 |validate-button-text =
 }}
 <pre>
@@ Line 30: / Line 41: @@
 |action = create
 |edit-page =
-|return-page = Gods
+|return-page = Demo_VisualData/Datatable_cards
 |view = popup
 |popup-size = medium
@@ Line 51: / Line 62: @@
 |validate-button-text =
 }}
+</pre>
+(see the docs [https://www.mediawiki.org/wiki/Extension:VisualData/Forms here])
+The single cells of the table can be styled using the "data-label" attribute as follows:
+<pre>
+.visualdata.datatable.cards td[data-label="picture"] {
+  display: block;
+  text-align: center;
+}
+</pre>
+(see [[Template:Demo_VisualData/Datatable cards/cards.css]] for the complete style)
+The following templates are applied to specific printouts with the syntax <code>|template?picture=GodsPicture</code> or <code>|template?action=GodsAction</code>
+* [[Template:GodsPicture]] (wikitext to display the card picture)
+* [[Template:GodsAction]] (wikitext to display the card action: it contains a VisualData form to edit the relevant card data)
-</pre>
@@ Line 73: / Line 103: @@
 }}
 </pre>
+(see the docs [https://www.mediawiki.org/wiki/Extension:VisualData/Result_formats here], note that the printouts with an empty alias, like <code>action=</code> or <code>url=</code> are used to ensure that the property is available within templates, without showing it)
 <templatestyles src="Demo_VisualData/Datatable cards/cards.css" />
@@ Line 91: / Line 123: @@
 }}
+source/idea: http://playground-mw.bitplan.com/