cardView.template

Set the template to use for the card view.
Please note - this property requires the CardView extension for DataTables.

Description

The real power of CardView is made available when you start to use custom card templates - indeed, you don't even need to ever display a table to your end user, stick with a custom template card for your data and still get all of the power of DataTables!

CardView has three template types built in, available on DataTable.CardView.template, each of which you can assign to this parameter:

• dlList - the default template - a view that makes use of a dl element and is styled to give a simple but attractive view of the row's data.
• ulList - a simple ul list.
• miniTable - each card uses a small table to easily visually provide distinction between column titles and the data points.

It starts to get particularly interesting when you use a custom template, which you can do by using this option as a CSS selector that will pick a template element from your page. The contents of the template will be used as the basis for each card that is to be displayed.

Consider the following template:

<template id="myCustomTemplate">
    <div class="cardView">
        Name: <span data-dtcv-dataSrc="name" /><br />
        Position: <span data-dtcv-dataSrc="salary" />
    </div>
</template>

The div contained in template will be reused for each card, and from this you will be able to see that you can use any arbitrary HTML. For example you might wish to add buttons to be able to control editing actions from inside a card.

You will also note the data-dtcv-dataSrc attributes. These define the data points from the source data that should be displayed in an element. If you use array sourced data, use an integer value, rather than the parameter name.

Types

string

function

Default

• Value: DataTable.CardView.templates.dlList

The built in dl based list template will be used for the card view.

Examples

new DataTable('#myTable', {
	cardView: {
		template: '#myCustomTemplate'
	}
});

new DataTable('#myTable', {
	cardView: {
		template: DataTable.CardView.templates.miniTable
	}
});