π
π
π
π
DataGrid Documentation
Searchβ¦
π
π
π
π
DataGrid Documentation
Getting Started
Buy DataGrid on CodeCanyon
Controls
Text Filter
Sort DropDown Control
Sort Button Control
Checkbox Filter
Radio Button Filter
Select Filter
Button Filter
Pagination
Page Size Control
Label Control
Multiple version of the same control (data-id attribute)
Languages Support
Special Classes
Deep Links
Storage
Multiple DataGrids on Page
How To
How To Sort Table in JavaScript
HTML Table with Sortable Headers
How to Filter HTML Table By Multiple Columns
Double Sort (Multiple Column Ordering)
Powered By
GitBook
Sort Button Control
The Sort Button Control is used to sort HTML elements using links or buttons. It is possible to sort text and numerical content.
This control is added in DataGrid v1.0.2
1
<
a
2
href
=
"
#
"
3
data-id
=
"
my_button
"
4
data-grid-control
=
"
sort-button
"
5
data-path
=
"
.first-name
"
6
data-direction
=
"
asc
"
7
data-toggle-direction
8
data-type
=
"
text
"
>
First Name
</
a
>
Copied!
It also can be a button:
1
<
button
2
type
=
"
button
"
3
data-id
=
"
my_button
"
4
data-grid-control
=
"
sort-button
"
5
data-path
=
"
.first-name
"
6
data-direction
=
"
asc
"
7
data-toggle-direction
8
data-type
=
"
text
"
>
First Name
</
button
>
Copied!
Select data attributes
Data Attribute
Value
Description
Required
data-grid-control
sort-button
This attribute defines the control type.
Required
data-path
any CSS selector
It defines the path to the item
that should be sorted.
Optional
data-direction
asc, desc
Sort direction
Optional
data-type
text, number, initial
Sort type
Optional
data-skip
[^a-zA-Z0-9]+
Defines a regex of characters
that should be skipped.
Optional
data-toggle-direction
no value
If this attribute exists, the control
will toggle direction between
asc
and
desc
on every click.
Optional
data-id
any alphanumeric string
This attribute may be used in the deep-link,
local storage, or complex filter logic.
Optional
Sort Types
Sort Type
Description
text
Sort by text content.
number
Sort by numeric content.
initial
Sort by initial document order.
The control supports the following CSS classes:
1
.dg-asc
{
2
/* when the control in the ASC state */
3
}
4
β
5
.dg-desc
{
6
/* when the control in the DESC state */
7
}
8
9
.dg-sort-selected
{
10
/* when the control in the latest
11
clicked between other sort buttons
12
with the same data-id
13
*/
14
}
Copied!
β
Controls - Previous
Sort DropDown Control
Next - Controls
Checkbox Filter
Last modified
1yr ago
Copy link
Contents