<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Table</title>
<!-- 1.) Load SAPUI5 (from a remote server), select theme and control library -->
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.unified,sap.ui.table" data-sap-ui-xx-bindingSyntax="complex"></script>
<style>
.paginatorStyle {
margin-left: 47%;
}
</style>
<!-- 2.) Create a UI5 button and place it onto the page -->
<script>
//Create an instance of the table control
var oTable2 = new sap.ui.table.Table("oTable", {
visibleRowCount: 5
});
//Define the columns and the control templates to be used
oTable2.addColumn(new sap.ui.table.Column({
multiLabels: [new sap.ui.commons.Label({
text: "Name"
}),
new sap.ui.commons.TextField({
placeholder: "Filter By Name",
liveChange: function(oEvent) {
// add filter for search
var aFilters = [];
var sQuery = oEvent.getParameter("liveValue");
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("Name", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
var binding = oTable2.getBinding("rows");
binding.filter(aFilters, "Application");
}
})
],
template: new sap.ui.commons.TextField().bindProperty("value", "Name")
}));
oTable2.addColumn(new sap.ui.table.Column({
multiLabels: [new sap.ui.commons.Label({
text: "Category"
}),
new sap.ui.commons.TextField({
placeholder: "Filter By Category",
liveChange: function(oEvent) {
// add filter for search
var aFilters = [];
var sQuery = oEvent.getParameter("liveValue");
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("Category", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
var binding = oTable2.getBinding("rows");
binding.filter(aFilters, "Application");
}
})
],
template: new sap.ui.commons.TextField().bindProperty("value", "Category")
}));
oTable2.addColumn(new sap.ui.table.Column({
multiLabels: [new sap.ui.commons.Label({
text: "SupplierName"
}),
new sap.ui.commons.TextField({
placeholder: "Filter By Supplier",
liveChange: function(oEvent) {
// add filter for search
var aFilters = [];
var sQuery = oEvent.getParameter("liveValue");
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("SupplierName", sap.ui.model.FilterOperator.Contains, sQuery);
aFilters.push(filter);
}
var binding = oTable2.getBinding("rows");
binding.filter(aFilters, "Application");
}
})
],
template: new sap.ui.commons.TextField().bindProperty("value", "SupplierName")
}));
oTable2.addColumn(new sap.ui.table.Column({
multiLabels: [new sap.ui.commons.Label({
text: "WeightMeasure"
}),
new sap.ui.commons.TextField({
placeholder: "Filter By Weight",
liveChange: function(oEvent) {
// add filter for search
var aFilters = [];
var sQuery = oEvent.getParameter("liveValue");
if (sQuery && sQuery.length > 0) {
var filter = new sap.ui.model.Filter("WeightMeasure", sap.ui.model.FilterOperator.EQ, sQuery);
aFilters.push(filter);
}
var binding = oTable2.getBinding("rows");
binding.filter(aFilters, "Application");
}
})
],
template: new sap.ui.commons.TextField().bindProperty("value", "WeightMeasure")
}));
var aData = [{
"ProductId": "1239102",
"Name": "Power Projector 4713",
"Category": "Projector",
"SupplierName": "Titanium",
"Description": "A very powerful projector with special features for Internet usability, USB",
"WeightMeasure": 1467,
"WeightUnit": "g"
}, {
"ProductId": "2212-121-828",
"Name": "Gladiator MX",
"Category": "Graphics Card",
"SupplierName": "Technocom",
"Description": "Gladiator MX: DDR2 RoHS 128MB Supporting 512MB Clock rate: 350 MHz Memory Clock: 533 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 32-bit Highlighted Features: DVI Out, TV Out , HDTV",
"WeightMeasure": 321,
"WeightUnit": "g"
}, {
"ProductId": "K47322.1",
"Name": "Hurricane GX",
"Category": "Graphics Card",
"SupplierName": "Red Point Stores",
"Description": "Hurricane GX: DDR2 RoHS 512MB Supporting 1024MB Clock rate: 550 MHz Memory Clock: 933 MHz, Bus Type: PCI-Express, Memory Type: DDR2 Memory Bus: 64-bit Highlighted Features: DVI Out, TV-In, TV-Out, HDTV",
"WeightMeasure": 588,
"WeightUnit": "g"
}, {
"ProductId": "22134T",
"Name": "Webcam",
"Category": "Accessory",
"SupplierName": "Technocom",
"Description": "Web camera, color, High-Speed USB",
"WeightMeasure": 700,
"WeightUnit": "g"
}, {
"ProductId": "P1239823",
"Name": "Monitor Locking Cable",
"Category": "Accessory",
"SupplierName": "Technocom",
"Description": "Lock for Monitor",
"WeightMeasure": 40,
"WeightUnit": "g"
}, {
"ProductId": "214-121-828",
"Name": "Laptop Case",
"Category": "Accessory",
"SupplierName": "Red Point Stores",
"Description": "Laptop Case with room for pencils and other items",
"WeightMeasure": 1289,
"WeightUnit": "g"
}, {
"ProductId": "XKP-312548",
"Name": "USB Stick 16 GByte",
"Category": "Accessory",
"SupplierName": "Red Point Stores",
"Description": "USB 2.0 HighSpeed 16GB",
"WeightMeasure": 11,
"WeightUnit": "g"
}, {
"ProductId": "KTZ-12012.V2",
"Name": "Deskjet Super Highspeed",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (colour) - capacity: 100 sheets - Hi-Speed USB2.0, Ethernet",
"WeightMeasure": 100,
"WeightUnit": "g"
}, {
"ProductId": "89932-922",
"Name": "Laser Allround Pro",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with a first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"WeightMeasure": 2134,
"WeightUnit": "g"
}, {
"ProductId": "38094020.1",
"Name": "Flat S",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "19 inches Optimum Resolution 1600 x 1200 @ 85Hz, Max resolution 1984 x 1488 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1401,
"WeightUnit": "g"
}, {
"ProductId": "870394932",
"Name": "Flat Medium",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "21 inches Optimum Resolution 1984 x 1488 @ 85Hz, Max resolution 1720 x 1280 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1800,
"WeightUnit": "g"
}, {
"ProductId": "KTZ-12012.V2",
"Name": "Highspeed",
"Category": "Printer",
"SupplierName": "Stores",
"Description": "1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (colour) - capacity: 100 sheets - Hi-Speed USB2.0, Ethernet",
"WeightMeasure": 1200,
"WeightUnit": "g"
}, {
"ProductId": "89932-922",
"Name": "Allround",
"Category": "Printer",
"SupplierName": "Point",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with a first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"WeightMeasure": 1134,
"WeightUnit": "g"
}, {
"ProductId": "38094020.1",
"Name": "Flat M",
"Category": "Monitor",
"SupplierName": "Screens",
"Description": "19 inches Optimum Resolution 1600 x 1200 @ 85Hz, Max resolution 1984 x 1488 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1501,
"WeightUnit": "g"
}, {
"ProductId": "870394932",
"Name": "Flat Small",
"Category": "Monitor",
"SupplierName": "Screens",
"Description": "21 inches Optimum Resolution 1984 x 1488 @ 85Hz, Max resolution 1720 x 1280 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1400,
"WeightUnit": "g"
}, {
"ProductId": "KTZ-12012.V2",
"Name": "Deskjet Super Highspeed",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (colour) - capacity: 100 sheets - Hi-Speed USB2.0, Ethernet",
"WeightMeasure": 100,
"WeightUnit": "g"
}, {
"ProductId": "89932-922",
"Name": "Laser Allround Pro",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with a first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"WeightMeasure": 2134,
"WeightUnit": "g"
}, {
"ProductId": "38094020.1",
"Name": "Flat S",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "19 inches Optimum Resolution 1600 x 1200 @ 85Hz, Max resolution 1984 x 1488 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1401,
"WeightUnit": "g"
}, {
"ProductId": "870394932",
"Name": "Flat Medium",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "21 inches Optimum Resolution 1984 x 1488 @ 85Hz, Max resolution 1720 x 1280 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1800,
"WeightUnit": "g"
}, {
"ProductId": "KTZ-12012.V2",
"Name": "Deskjet Super Highspeed",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "1200 dpi x 1200 dpi - up to 25 ppm (mono) / up to 24 ppm (colour) - capacity: 100 sheets - Hi-Speed USB2.0, Ethernet",
"WeightMeasure": 100,
"WeightUnit": "g"
}, {
"ProductId": "89932-922",
"Name": "Laser Allround Pro",
"Category": "Printer",
"SupplierName": "Red Point Stores",
"Description": "Print up to 25 ppm letter and 24 ppm A4 color or monochrome, with a first-page-out-time of less than 13 seconds for monochrome and less than 15 seconds for color",
"WeightMeasure": 2134,
"WeightUnit": "g"
}, {
"ProductId": "38094020.1",
"Name": "Flat S",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "19 inches Optimum Resolution 1600 x 1200 @ 85Hz, Max resolution 1984 x 1488 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1401,
"WeightUnit": "g"
}, {
"ProductId": "870394932",
"Name": "Flat Medium",
"Category": "Monitor",
"SupplierName": "Very Best Screens",
"Description": "21 inches Optimum Resolution 1984 x 1488 @ 85Hz, Max resolution 1720 x 1280 @ 75Hz, Dot Pitch: 0.24mm",
"WeightMeasure": 1800,
"WeightUnit": "g"
}];
//Create a model and bind the table rows to this model
var model = new sap.ui.model.json.JSONModel();
var oLength = aData.length;
var oActual = oLength / 10;
var oCalculation = (oActual % 1 == 0);
if (oCalculation == true) {
var oValue = oActual;
} else {
var oValue = parseInt(oActual) + 1;
}
model.setData(aData);
sap.ui.getCore().setModel(model);
model.setProperty("/oRows", aData.slice(0, 10));
oTable2.bindRows("/oRows");
var oPaginator = new sap.ui.commons.Paginator({
numberOfPages: oValue,
page: function(oEvent) {
var oValue = oEvent;
var oTargetPage = oEvent.getParameter("targetPage");
var oTargetValue = oTargetPage * 10;
var oSourceValue = oTargetValue - 10;
var oModel = sap.ui.getCore().getModel();
var oTotalData = oModel.getProperty("/");
var oSelectedData = oTotalData.slice(oSourceValue, oTargetValue);
oModel.setProperty("/oRows", oSelectedData);
var oScrollBar = oTable2._oVSb;
oScrollBar.setScrollPosition(0);
oTable2.clearSelection();
}
}).addStyleClass("paginatorStyle");
var oLayout = new sap.ui.layout.VerticalLayout({
content: [oTable2, oPaginator]
});
oLayout.placeAt("uiArea");
</script>
</head>
<body class="sapUiBody">
<!-- This is where you place the UI5 button -->
<div id="uiArea"></div>
</body>
</html>
// Code goes here
/* Styles go here */