DataTable allows you to sort data rows on the client side. There are 2 ways to invoke sorting in the table:
When you click on the header, DataTable starts to display a special control indicating which column the table is currently sorted by and the direction of this sorting (ascending or descending). Each next click on the same header will reverse the sorting direction.
Columns can have different type of content (numbers, strings, dates) and each type of content requires its specific way of sorting.
For this purpose, DataTable provides 4 sorting types to ensure correct sorting of columns:
To enable sorting and assign the appropriate sorting type to a column, you should specify an attribute sort among the column's parameters and set it to some of types.
Sorting configuration
grid = new webix.ui({
view:"datatable",
...
columns:[
{ id:"title", header:"Film title", sort:"string"},
{ id:"year", header:"Release year", sort:"int"}
]
});
Related sample: Sorting. Using built-in means
The above mentioned sorting modes work with column values defined by their ID attributes and ignore values either defined by column templates or provided by column options.
In the sample column below column titles are sorted, yet categories are displayed (column template overrides column ID during rendering):
{ id:"title", template:"#cat_id#", header:"Category ID" }
In the sample column below option IDs are sorted, yet option values are displayed:
{ id:"cat_id", header:"Category", collection:[
{ id:1, value:"Crime"}, { id:2, value:"Thriller" }]
}
Sorting by visible text is enabled width the help of "text" sorting mode that switches on string comparison for the values actually displayed in datatable columns.
It takes into account column values defined by templates and collection values rather than IDs:
columns:[
{ id:"title",template:"#cat_id#", header:"Category ID", sort:"text" },
{ id:"cat_id", header:"Category",sort:"text", collection:[
{ id:1, value:"Crime"}, { id:2, value:"Thriller" }]
}
]
Related sample: Sorting. Using built-in means
It's possible to issue a request to server to sort data in backend and reload the sorted dataset to the datatable:
The option is enabled by server sorting mode:
view:"datatable",
columns:[
{ id:"package", header:"Name", sort:"server"},
{..}
],
url:"data.php"
Related sample: Datatable: Serverside Filtering and Sorting
Now, header clicking will trigger a serverside GET request with the following parameter: sort[package]=desc (data.php?sort[package]=desc), which allows sending:
The new data will be loaded to the datatable and replace the initial dataset.
If serverFilter is enabled for this column, the data will be both filtered and sorted on serverside before returning to client.
If you want to apply custom sorting behaviour, you can define the related logic in a function and set this function as the value of attribute sort.
This function will be called for each pair of adjacent values and return 1,-1 or 0:
The function can be defined in a general way:
Using custom functions for sorting DataTable
function sortById(a,b){
a = a.rank;
b = b.rank;
return a>b?1:(a<b?-1:0);
}
webix.ui({
view:"datatable",
...
columns:[
{ id:"title", header:"Film title", sort:sortByParam },
...
]
})
Related sample: Sorting Datatable. Using custom sorting functions
You should use method sort() to invoke sorting on some event or action, i.e button click or page load. You can't use this method if you want to sort DataTable by a click on the header.
Sorting DataTable on the button click
<input type='button' onclick='grid.sort("#title#", "asc", "string");'>
<script type="text/javascript" charset="utf-8"> grid = webix.ui({ view:'datatable', ...})
</script>
Related sample: Sorting Datatable. Using sorting methods
You can show and hide the sorting sign (^/V) by calling the markSorting() method with the following parameters:
When used with no arguments, the method removed all the sorting signs from the datatable headers.
Cancelling sorting
grid = webix.ui({ view:"datatable", ...})
grid.markSorting("title", "asc");
Related sample: Sorting Datatable. Using sorting methods
Back to top