Datatable cards

The following demonstrates the use of Datatables with datatables-cards=true.

This page contains the following components:

• a 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 =
}}

The single cells of the table can be styles 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)

Used templates:

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

 

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

action	picture	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

See also

• Demo VisualData 1.0
• New task
• Page upload
• CRUD
• Result formats
• Dependent values
• Geolocation
• Queries
• Query cities (join queries)
• Dynamic catalogue
• Datatable cards
• Nested schemas
• Carousel
• Table mode
• Lua
• Official docs

support & questions: support at topway.it

Download the latest version!