Label Control

The label control is used to print information about the current page state. For example, it may be the selected page number or the total page number.

<div
data-grid-control="label"
data-type="pagination-pages">
</div>

Data Attribute

Value

Description

Required

data-grid-control

label

This attribute defines the control type.

Required

data-type

  • pagination-pages

  • pagination-items

  • no-results

Label type.

Optional

Label Types

Type

Example

pagination-pages

Page 1 of 3

pagination-items

1 - 12 of 36

no-results

No results found.

No results label

This label appears when the total number of items becomes zero.

<div
data-grid-control="label"
data-type="no-results"
data-text="No results found.">
</div>

Custom label

It is possible to create a custom label using the following callback function:

<script>
datagrid({
// render custom label HTML
renderLabelControl: function(state, $control){
return 'any custom html';
}
});
</script>

If the label is empty, it has a dg-label-empty CSS class. This way, it's possible to add special styles:

.dg-label-empty{
display: none;
}