This demo shows the server side sorting and filtering in DataViews.
Local sort and filter only apply to the current page. If you want to arrange the data on the server, set the serverSideSort and serverSideFilter options to true.
When server side sort or filter is applied, sort descriptors and filter descriptors are sent in the parameters of the loadRange callback.
Sort descriptors (params.sort) is an array, which has its element made up of a string field and a boolean ascending.
Filter descriptors (params.filter) contains a string field, a string operator, and an Array or any type value.
Try sorting and filtering the data using the drop down menus above the grid.
This demo calls some API items from the internet, make sure your internet connection is working and runing this demo with HTTP or HTTPS protocol.
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/dataviewsjs/demos/en/sample/Features/DataBinding/ServerSideSortAndFilter/purejs/" />
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="keywords" content="filter, filtering" />
<meta name="description" content="This demo shows the server side sorting and filtering in DataViews." />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Server Side Sort and Filter | Features | MESCIUS DataViewsJS JavaScript Demos</title>
<link href="/dataviewsjs/demos/node_modules/normalize.css/normalize.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/css/base.css" rel="stylesheet" type="text/css" />
<link
href="/dataviewsjs/demos/node_modules/@fortawesome/fontawesome-free/css/all.min.css"
rel="stylesheet"
type="text/css"
/>
<link href="/dataviewsjs/demos/static/css/pageui.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.css" rel="stylesheet" type="text/css" />
<link href="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<script src="/dataviewsjs/demos/static/js/app-polyfills.min.js" type="text/javascript"></script>
<script type="text/javascript">
window.process = {
env: {
NODE_ENV: 'production',
USE_NPM: false,
USE_CDN: false,
SITE_ROOT: '/dataviewsjs/demos',
FRAMEWORK: 'purejs',
DVJS_LICENSE_KEY:
'E348418822993781#B0EWvwY4dNNVQqJHUDpFROVWe5ZWNYFlVQFmRsJWRht4Z6lDO4Vla7YUaXhEWxd7Z5YXMuRnY7tWTQRHSlVnaYlXNhlEOpdkZ0FHWYJ5QKd6VXN5aR3ieGhUav9kZTBXWahkYBhEVutmZ72CbjdlZvV5TVdGdiplQsZXe95kUmNmZVF5cJ3mcypWNyx4UydESE3UblxGZyE7KQ94R4BjbUxUewsiaoREMxRDNllWREV6Voh4Q4dDZPRjWrIzUJl4TERXcQZWMHp4Sp9WaMZzN5o6StJmVDJXcwIVVmR6UMVGOlxUW8RmTxZDZTJWVN5GZqJHZuVDMkVGSW3WdxNzKCdDdSB7TzY7cqlnMU5GVyNzNP9WMyhDRvEEOFdkQORDM4dFVlFFWqFWSyMjNQJiOiMlIsISQyIkQ9YjQxIiOigkIsUTM7YjNxYTM0IicfJye&Qf35VfikFVVljI0IyQiwiIxYHITp4c7VWaWFGdhRkI0IiTis7W0ICZyBlIsIiNxUTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiEDO7MTO9IjM8gTM4gDNzIiOiQWSisnOiQkIsISP3EkVxBVUHFDMplzLlVUdGd7cI9UeIt4SshESzV7NvY7ZxlDOuNTb5tzLr',
SJS_LICENSE_KEY:
'E518585142165236#B0wm4nx4QzdlTHRTSOFzcvVnaJdjSnNEeXdTMUtSUzk6bU94QuVXNwZVZjd4SzYjcadXRIVEMzEXTThkVyR7R85UayoHZZBTYQ5mZyh4Shd6VxFXazF4cBNGRG5WTvUGTsV4T6knQYRzKxxUdk9EarplU7d6VLF6KIR7bPJ5N6ZUMWZWaURGRKRDbLJDN5YjSN5mUoxmaxonSD56LEh7Y7RXenpmTvomevZlV9dkaysCO7hTRQFHcGRWQyc5LI9kQmB7QwR4Z7ZHOR3CSXp6SiFWYzFXeXZUSp94K8VDTkFjdwl4KptSYlRWcDxmNE5kS6kzdrkVcNJXROVGbLJkcTNGRzIER8tmd4YGNhh7dxAnMvIHRv46VtBXS4U5KvJ6dZJ6M5p4TxIjd9I5QSpXTTV6SDZXb7lzaL56ZiojITJCLikTQxUTQFV4NiojIIJCLyETO7UzM7kTO0IicfJye&Qf35VfikkR9IkI0IyQiwiIyEjL6ByUKBCZhVmcwNlI0IiTis7W0ICZyBlIsISNwkTN6ADI8EDMxMjMwIjI0ICdyNkIsIyc59yc5l6YzVWbuoCLwpmLzVXajNXZt9iKs2WauMXdpN6cl5mLqwSbvNmLzVXajNXZt9iKsAnau26YuMXdpN6cl5mLqwSbvNmL6VGZ9RXajVGchJ7ZuoCLuNmLt36YukHdpNWZwFmcn9iKs46bj9Se4l6YlBXYydmLqwicr9ybj9Se4l6YlBXYydmLqwCcq9ybj9Se4l6YlBXYydmLqIiOiMXbEJCLiMVVJN4UF5kI0ISYONkIsUWdyRnOiwmdFJCLiYzMyUjNxIDNxUDO5gTM5IiOiQWSiwSfdtlOicGbmJCLlNHbhZmOiI7ckJye0ICbuFkI1pjIEJCLi4TPRtGOhtWWEFWd4IDOLRVRvx4SyMGcDhTW6n4ep',
},
};
</script>
<script src="/dataviewsjs/demos/node_modules/lodash/lodash.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/node_modules/jquery/dist/jquery.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/pageui.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.common.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.core.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/dataviews/gc.dataviews.grid.min.js" type="text/javascript"></script>
<script src="/dataviewsjs/demos/static/js/license.js" type="text/javascript"></script>
</head>
<body class="theme-default">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div class="main-container">
<div class="sample-options">
<div class="option-row">
<label>Sort by country:</label>
<select id="sort-selector">
<option value="none" selected>none</option>
<option value="ascending">ascending</option>
<option value="descending">descending</option>
</select>
</div>
<div class="option-row">
<label>Filter by country:</label>
<select id="filter-selector">
<option value="none" selected>none</option>
<option value="United States">United States</option>
<option value="Australia">Australia</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Canada">Canada</option>
<option value="France">France</option>
<option value="Germany">Germany</option>
</select>
</div>
</div>
<div id="grid" class="grid"></div>
<div id="page-nav" class="container"></div>
</div>
<script src="locale.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
</body>
</html>
var cols = [
{
id: 'id',
caption: 'Order Id',
dataField: 'Transaction_Id',
dataType: 'number',
allowEditing: false,
},
{
id: 'date',
caption: 'Date',
dataField: 'Transaction_Date',
dataType: 'date',
format: 'mm/dd/yyyy',
width: 95,
},
{
id: 'product',
caption: 'Product',
dataField: 'Product',
width: '*',
minWidth: 290,
},
{
id: 'price',
caption: 'Price',
dataField: 'Price',
dataType: 'number',
width: 60,
},
{
id: 'quantity',
caption: 'Qty',
dataField: 'Quantity',
dataType: 'number',
width: 45,
},
{
id: 'paymentType',
caption: 'Payment',
dataField: 'Payment_Type',
width: 95,
},
{
id: 'name',
caption: 'Name',
dataField: 'Name',
width: 140,
},
{
id: 'city',
caption: 'City',
dataField: 'City',
width: 125,
},
{
id: 'state',
caption: 'State',
dataField: 'State',
width: 105,
},
{
id: 'country',
caption: 'Country',
dataField: 'Country',
width: 125,
},
];
var layout = new GC.DataViews.GridLayout({
colWidth: 80,
colHeaderHeight: 30,
rowHeight: 38,
pageSize: 10,
});
var dataView = new GC.DataViews.DataView(document.getElementById('grid'), dataSource, cols, layout);
PageUI.init(dataView.data.pageController);
$('#sort-selector').on('change', onSelectChange);
$('#filter-selector').on('change', onFilterChange);
var sortValue = 'none';
var filterValue = 'none';
function onSelectChange(e) {
var value = e.target.value;
if (value !== sortValue) {
sortValue = value;
switch (sortValue) {
case 'ascending':
dataView.options.sorting = {
field: 'country',
ascending: true,
};
break;
case 'descending':
dataView.options.sorting = {
field: 'country',
ascending: false,
};
break;
default:
dataView.options.sorting = null;
}
}
}
function onFilterChange(e) {
var value = e.target.value;
if (value !== filterValue) {
filterValue = value;
dataView.options.filtering =
filterValue === 'none'
? null
: {
field: 'country',
operator: 'equal',
value: value,
};
}
}
var baseUrl = ''.concat(process.env.SITE_ROOT, '/remotedata/api/records');
function getRecords(start, count, sort, filter) {
var snippets = [];
if (_.isArray(sort)) {
_.forEach(sort, function (sortDescriptor) {
snippets.push('sort='.concat(sortDescriptor.ascending ? '' : '-').concat(sortDescriptor.field.toLowerCase()));
});
}
if (_.isArray(filter)) {
_.forEach(filter, function (filterDescriptor) {
var value = filterDescriptor.value;
var field = filterDescriptor.field.toLowerCase();
if (_.isArray(value)) {
var tempArr = [];
_.forEach(value, function (v) {
tempArr.push(encodeURIComponent(''.concat(field, '=').concat(v)));
});
snippets.push(tempArr.join('&&'));
} else {
snippets.push('filter='.concat(encodeURIComponent(''.concat(field, '=').concat(value))));
}
});
}
if (start !== undefined) {
snippets.push('start='.concat(start));
}
if (count !== undefined) {
snippets.push('count='.concat(count));
}
if (snippets.length > 0) {
return ''.concat(baseUrl, '?').concat(snippets.join('&'));
}
return baseUrl;
}
var dataSource = {
loadRange: function loadRange(params) {
$.ajax({
url: getRecords(
params.pageIndex ? params.pageSize * params.pageIndex : undefined,
params.pageSize,
params.sort,
params.filter
),
crossDomain: true,
success: function success(result) {
params.success(result.m_Item2, result.m_Item1);
},
error: function error(xhr, status) {
params.failed();
if (status !== 'abort') {
alert(locale.loadFailed);
}
},
});
},
serverSideSort: true,
serverSideFilter: true,
};
var locale = {
sortByCountry: 'Sort by country:',
filterByCountry: 'Filter by country:',
none: 'none',
ascending: 'ascending',
descending: 'descending',
loadFailed: 'Failed to load data from remote web site.',
};
.main-container {
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
.main-container .sample-options {
display: flex;
background: #fbfbfb;
box-sizing: border-box;
overflow: hidden;
padding: 10px;
flex-grow: 0;
flex-shrink: 0;
}
.main-container .sample-options .option-row {
margin-right: 5px;
}
.main-container .sample-options .option-row label {
margin-right: 5px;
}
.main-container #page-nav {
overflow: hidden;
}
#grid,
.grid {
height: calc(100% - 52px - 42px);
width: 100%;
flex-grow: 1;
flex-shrink: 1;
}
.gc-row {
line-height: 36px;
}
/*# sourceMappingURL=data:application/json;charset=utf8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkZlYXR1cmVzL0RhdGFCaW5kaW5nL1NlcnZlclNpZGVTb3J0QW5kRmlsdGVyL3B1cmVqcy9zdHlsZXMuc2NzcyIsIkZlYXR1cmVzL0RhdGFCaW5kaW5nL1NlcnZlclNpZGVTb3J0QW5kRmlsdGVyL3B1cmVqcy9zdHlsZXMuY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBO0VBQ0UsYUFBQTtFQUNBLHNCQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7QUNDRjtBRENFO0VBQ0UsYUFBQTtFQUNBLG1CQUFBO0VBQ0Esc0JBQUE7RUFDQSxnQkFBQTtFQUNBLGFBQUE7RUFDQSxZQUFBO0VBQ0EsY0FBQTtBQ0NKO0FEQ0k7RUFDRSxpQkFBQTtBQ0NOO0FEQ007RUFDRSxpQkFBQTtBQ0NSO0FESUU7RUFDRSxnQkFBQTtBQ0ZKOztBRE1BOztFQUVFLGdDQUFBO0VBQ0EsV0FBQTtFQUNBLFlBQUE7RUFDQSxjQUFBO0FDSEY7O0FETUE7RUFDRSxpQkFBQTtBQ0hGIiwiZmlsZSI6IkZlYXR1cmVzL0RhdGFCaW5kaW5nL1NlcnZlclNpZGVTb3J0QW5kRmlsdGVyL3B1cmVqcy9zdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcblxuICAuc2FtcGxlLW9wdGlvbnMge1xuICAgIGRpc3BsYXk6IGZsZXg7XG4gICAgYmFja2dyb3VuZDogI2ZiZmJmYjtcbiAgICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gICAgcGFkZGluZzogMTBweDtcbiAgICBmbGV4LWdyb3c6IDA7XG4gICAgZmxleC1zaHJpbms6IDA7XG5cbiAgICAub3B0aW9uLXJvdyB7XG4gICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcblxuICAgICAgbGFiZWwge1xuICAgICAgICBtYXJnaW4tcmlnaHQ6IDVweDtcbiAgICAgIH1cbiAgICB9XG4gIH1cblxuICAjcGFnZS1uYXYge1xuICAgIG92ZXJmbG93OiBoaWRkZW47XG4gIH1cbn1cblxuI2dyaWQsXG4uZ3JpZCB7XG4gIGhlaWdodDogY2FsYygxMDAlIC0gNTJweCAtIDQycHgpO1xuICB3aWR0aDogMTAwJTtcbiAgZmxleC1ncm93OiAxO1xuICBmbGV4LXNocmluazogMTtcbn1cblxuLmdjLXJvdyB7XG4gIGxpbmUtaGVpZ2h0OiAzNnB4O1xufVxuIiwiLm1haW4tY29udGFpbmVyIHtcbiAgZGlzcGxheTogZmxleDtcbiAgZmxleC1kaXJlY3Rpb246IGNvbHVtbjtcbiAgd2lkdGg6IDEwMCU7XG4gIGhlaWdodDogMTAwJTtcbn1cbi5tYWluLWNvbnRhaW5lciAuc2FtcGxlLW9wdGlvbnMge1xuICBkaXNwbGF5OiBmbGV4O1xuICBiYWNrZ3JvdW5kOiAjZmJmYmZiO1xuICBib3gtc2l6aW5nOiBib3JkZXItYm94O1xuICBvdmVyZmxvdzogaGlkZGVuO1xuICBwYWRkaW5nOiAxMHB4O1xuICBmbGV4LWdyb3c6IDA7XG4gIGZsZXgtc2hyaW5rOiAwO1xufVxuLm1haW4tY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyB7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuLm1haW4tY29udGFpbmVyIC5zYW1wbGUtb3B0aW9ucyAub3B0aW9uLXJvdyBsYWJlbCB7XG4gIG1hcmdpbi1yaWdodDogNXB4O1xufVxuLm1haW4tY29udGFpbmVyICNwYWdlLW5hdiB7XG4gIG92ZXJmbG93OiBoaWRkZW47XG59XG5cbiNncmlkLFxuLmdyaWQge1xuICBoZWlnaHQ6IGNhbGMoMTAwJSAtIDUycHggLSA0MnB4KTtcbiAgd2lkdGg6IDEwMCU7XG4gIGZsZXgtZ3JvdzogMTtcbiAgZmxleC1zaHJpbms6IDE7XG59XG5cbi5nYy1yb3cge1xuICBsaW5lLWhlaWdodDogMzZweDtcbn0iXX0= */
