<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Table Sort Sample</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-cachebuster/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.ui.commons,sap.ui.table"
data-sap-ui-xx-bindingSyntax="complex"
>
</script>
<style>
.buttonStyle{
margin-left: 47%;
}
</style>
<script>
var dataObject = [
{
"Region": "EMEA",
"Region_ID": "1",
"Country": "Germany",
"Country_ID": "1",
"Location": "Berlin",
"Location_ID": "1"
},
{
"Region": "APJ",
"Region_ID": "2",
"Country": "Japan",
"Country_ID": "12",
"Location": "Fukuoka",
"Location_ID": "48"
},
{
"Region": "AMER",
"Region_ID": "3",
"Country": "USA",
"Country_ID": "36",
"Location": "Chicago",
"Location_ID": "99"
},
{
"Region": "APJ",
"Region_ID": "2",
"Country": "India",
"Country_ID": "65",
"Location": "Bangalore",
"Location_ID": "458"
},
{
"Region": "EMEA",
"Region_ID": "1",
"Country": "France",
"Country_ID": "35",
"Location": "Paris",
"Location_ID": "999"
},
{
"Region": "AMER",
"Region_ID": "3",
"Country": "Brasil",
"Country_ID": "47",
"Location": "Rio de Janairo",
"Location_ID": "6"
}
];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
locationData : []
}
});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/locationData", dataObject);
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table("oTable",{
title: "Table Multiple Columns Sort Example",
visibleRowCount: 6,
selectionMode: sap.ui.table.SelectionMode.Single
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Region"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Region"),
sortProperty:"Region",
filterProperty:"Region",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Region_ID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Region_ID"),
sortProperty:"Region_ID",
filterProperty:"Region_ID",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Country"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Country"),
sortProperty:"Country",
filterProperty:"Country",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Country_ID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Country_ID"),
sortProperty:"Country_ID",
filterProperty:"Country_ID",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Location"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Location"),
sortProperty:"Region",
filterProperty:"Region",
width: "200px"
}));
oTable2.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Location_ID"}),
template: new sap.ui.commons.TextView().bindProperty("text", "Location_ID"),
sortProperty:"Region_ID",
filterProperty:"Region_ID",
width: "200px"
}));
oTable2.bindRows("/modelData/locationData");
var oButton = new sap.ui.commons.Button({text:"Sort Table", icon:"sap-icon://sort", style:"Emph",
press:function(oEvent){
var oRegionSort = oTable2.getColumns()[0].sort(false);
var oCountrySort = oTable2.getColumns()[2].sort(false);
var oLocationSort = oTable2.getColumns()[4].sort(false);
oTable2.sort([oRegionSort,oCountrySort,oLocationSort]);
}}).addStyleClass("buttonStyle");
var ovLayout = new sap.ui.layout.VerticalLayout("Layout1", {
content: [oTable2, oButton]
});
ovLayout.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */