📔
📔
📔
📔
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
Double Sort (Multiple Column Ordering)
DataGrid library allows sorting on multiple columns at the same time. Let's see an example with double sorting a list of DIV elements.
Let's add a basic HTML structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Sort (Multiple Column Ordering)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
​
<!-- Demo page CSS -->
<link href="styles.css" rel="stylesheet" />
​
</head>
<body>
​
<div class="wrapper">
<div class="item header">
<div>Name</div>
<div>Birth Year</div>
</div>
​
<!-- items to sort -->
<div class="data">
<div class="item">
<div class="name">Arch</div>
<div class="year">1956</div>
</div>
​
<div class="item">
<div class="name">Birdie</div>
<div class="year">1987</div>
</div>
​
<div class="item">
<div class="name">Denver</div>
<div class="year">1976</div>
</div>
​
<div class="item">
<div class="name">Arch</div>
<div class="year">1955</div>
</div>
​
<div class="item">
<div class="name">Oberon</div>
<div class="year">1965</div>
</div>
​
<div class="item">
<div class="name">Heath</div>
<div class="year">2013</div>
</div>
​
<div class="item">
<div class="name">Filippo</div>
<div class="year">1973</div>
</div>
​
<div class="item">
<div class="name">Kip</div>
<div class="year">1940</div>
</div>
​
<div class="item">
<div class="name">Filippo</div>
<div class="year">1972</div>
</div>
​
<div class="item">
<div class="name">Oberon</div>
<div class="year">1967</div>
</div>
​
<div class="item">
<div class="name">Kip</div>
<div class="year">1939</div>
</div>
​
<div class="item">
<div class="name">Arch</div>
<div class="year">1957</div>
</div>
​
<div class="item">
<div class="name">Filippo</div>
<div class="year">1971</div>
</div>
​
<div class="item">
<div class="name">Kip</div>
<div class="year">1941</div>
</div>
​
<div class="item">
<div class="name">Oberon</div>
<div class="year">1966</div>
</div>
</div>
</div>
</body>
</html>
Page styles could be:
styles.css
.wrapper{
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
width: 400px;
max-width: 95%;
margin: 3rem auto;
display: flex;
flex-direction: column;
border-radius: 0.5rem;
overflow: hidden;
border: 1px solid #ccc;
}
​
.item{
display: flex;
border-bottom: 1px solid #ccc;
padding: 0.5rem 1rem;
}
​
.item:last-child{
border-bottom: 0;
}
​
.header{
font-weight: bold;
background: #e0f9ff;
}
​
.item >div{
width: 50%;
}
​
.item a{
color: #000
}
​
.item a::after{
margin-left: 1rem;
display: inline-block;
font-size: 1rem;
content: '\2195';
}
​
.dg-sort-selected.dg-asc::after{
content: '\25BC';
font-size: 0.8rem;
}
​
.dg-sort-selected.dg-desc::after{
content: '\25B2';
font-size: 0.8rem;
}
Now we need to add a DataGrid CSS to the HEAD of the document:
<!-- DataGrid library CSS -->
<link href="datagrid.min.css" rel="stylesheet" />
And additionally, we need to add the DataGrid script at the bottom of the document.
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>
Now we need to define what exactly should be sorted. Let's add the data-grid attribute to the div that wraps data and the data-grid-item property to each data element. Now the HTML will look like follows:
<!-- items to sort -->
<div class="data" data-grid>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1956</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Birdie</div>
<div class="year">1987</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Denver</div>
<div class="year">1976</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1955</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1965</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Heath</div>
<div class="year">2013</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1973</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1940</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1972</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1967</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1939</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1957</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1971</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1941</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1966</div>
</div>
</div>
Now let's replace table headers with Sort Button controls. Please note that data-id should have different values:
<div class="item header">
<div>
<a
href="#"
data-id="name"
data-grid-control="sort-button"
data-path=".name"
data-direction="asc"
data-toggle-direction
data-type="text">Name</a>
</div>
<div>
<a
href="#"
data-id="year"
data-grid-control="sort-button"
data-path=".year"
data-direction="asc"
data-toggle-direction
data-type="number">Birth Year</a>
</div>
</div>
You may find the detailed documentation of the sort button control here.
The final step is to initialize the DataGrid library as follows:
<script>
datagrid();
</script>
That's all! The final HTML is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Double Sort (Multiple Column Ordering)</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
​
<!-- DataGrid library CSS -->
<link href="datagrid.min.css" rel="stylesheet" />
​
<!-- Demo page CSS -->
<link href="styles.css" rel="stylesheet" />
</head>
<body>
​
<div class="wrapper">
<div class="item header">
<div>
<a
href="#"
data-id="name"
data-grid-control="sort-button"
data-path=".name"
data-direction="asc"
data-toggle-direction
data-type="text">Name</a>
</div>
<div>
<a
href="#"
data-id="year"
data-grid-control="sort-button"
data-path=".year"
data-direction="asc"
data-toggle-direction
data-type="number">Birth Year</a>
</div>
</div>
​
<!-- items to sort -->
<div class="data" data-grid>
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1956</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Birdie</div>
<div class="year">1987</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Denver</div>
<div class="year">1976</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1955</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1965</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Heath</div>
<div class="year">2013</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1973</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1940</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1972</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1967</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1939</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Arch</div>
<div class="year">1957</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Filippo</div>
<div class="year">1971</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Kip</div>
<div class="year">1941</div>
</div>
​
<div class="item" data-grid-item>
<div class="name">Oberon</div>
<div class="year">1966</div>
</div>
</div>
</div>
​
<!-- DataGrid library JavaScript -->
<script src="datagrid.min.js"></script>
​
<script>
datagrid();
</script>
</body>
</html>
How To - Previous
How to Filter HTML Table By Multiple Columns
Last modified 1yr ago
Copy link