Datatable cards

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

See also

Navigation menu