Label Control

Search…

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.
1
<div 
2
    data-grid-control="label" 
3
    data-type="pagination-pages">
4
</div>
Copied!
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.
1
<div 
2
    data-grid-control="label" 
3
    data-type="no-results" 
4
    data-text="No results found.">
5
</div>
Copied!
Custom label
It is possible to create a custom label using the following callback function:
1
<script>
2
    datagrid({
3
        // render custom label HTML
4
        renderLabelControl: function(state, $control){
5
            return 'any custom html';
6
        }
7
    });
8
</script>
Copied!
If the label is empty, it has a dg-label-empty CSS class. This way, it's possible to add special styles:
1
.dg-label-empty{
2
    display: none;
3
}
Copied!

Controls - Previous

Page Size Control

Multiple version of the same control (data-id attribute)

Last modified 11mo ago

Copy link