renderer

Since: DataTables 1.10

Display component renderer types.

Description

DataTables adds complex components to your HTML page, such as the pagination control. The business logic used to calculate what information should be displayed (what buttons in the case of the pagination buttons) is core to DataTables and generally doesn't vary how the buttons are actually displayed based on the styling requirements of the page. For example the pagination buttons might be displayed as li elements in a ul list, or simply as a collection of a buttons.

This ability to use different renderers, while maintaining the same core business logic, is fundamental to how DataTables provides integration options for CSS frameworks such as Bootstrap, Foundation and jQuery UI, customising the HTML it uses to fit the requirements of each framework.

This parameter controls which renderers will be used. The value given will be used if such a renderer exists, otherwise the default renderer will be used. Additional renderers can be added by plug-ins.

DataTables currently supports two different types of renderers:

header - header cell renderer
layout - position of table control elements (since 2.0)
pagingButton - pagination buttons (since 2.0)
pagingContainer - pagination container (since 2.0)

This list will likely expand significantly in future versions of DataTables!

Types

string

Description:: Attempt to use renderers of this name for all available renderers. If a renderer is not found matching this name for the renderer type requested, the default renderer will be used.

object

Description:: Specify specific renderers for the different renderer types. For a list of the available renderer types, please see the documentation below.

Examples

Using the Bootstrap plug-in renderer:

new DataTable('#myTable', {
	renderer: 'bootstrap'
});

Specifying a specific renderer type for each available operation:

new DataTable('#myTable', {
	renderer: {
		header: 'jqueryui',
		pagingButton: 'bootstrap',
		pagingContainer: 'bootstrap'
	}
});

The following options are directly related and may also be useful in your application development.

Options

pagingType