Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
    <meta name="description" content="UI5 XML view example" />
    <meta http-equiv='X-UA-Compatible' content='IE=edge' />
    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
​
    <title>UI5 - JSON DataBinding</title>
​
    <script id='sap-ui-bootstrap' type='text/javascript'
            src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
            data-sap-ui-theme='sap_bluecrystal'
            data-sap-ui-libs='sap.ui.commons, sap.ui.table'></script>
​
    <script id="view1" type="ui5/xmlview">
        <core:view xmlns:core="sap.ui.core"
                   xmlns="sap.ui.commons"
                   xmlns:table="sap.ui.table"
                   xmlns:html="http://www.w3.org/1999/xhtml"
                   controllername="view.Main">
            <table:Table width="100%" id="players" visibleRowCount="5" selectionMode="Single" editable="false" rows="{/data}">
                <table:title><Label text="XML View"></Label></table:title>
                <table:Column>
                    <Label text="Player Name" />
                    <table:template><TextField value="{name}"></TextField></table:template>
                </table:Column>
                <table:Column>
                    <Label text="Email Address" />
                    <table:template><TextField value="{age}"></TextField></table:template>
                </table:Column>
​
            </table:Table>
        </core:view>
    </script>
​
    <script>
​
        var player = [
          { name: "Rajesh", age: "21" },
          { name: "Kunal Jauhari", age: "21" },
          { name: "Ashish Singh", age: "21" },
          { name: "Ansuman Parhi", age: "21" },
          { name: "Arup Kumar", age: "21" },
          { name: "Deepak Malviya", age: "21" },
          { name: "Seshu", age: "21" },
          { name: "Ankush Datey", age: "21" },
          { name: "Tapesh Syawaria", age: "21" },
          { name: "Mahesh", age: "21" },
          { name: "Vinay Joshi", age: "21" },
          { name: "Ardhendu Karna", age: "21" },
          { name: "Abhishek Shukla", age: "21" },
          { name: "Kashim", age: "21" },
          { name: "Vinayak", age: "21" }
        ];
​
      // create a "json" Model
        var oModel = new sap.ui.model.json.JSONModel();
​
        /***** LOADING THE DATA *****/
        sap.ui.controller("view.Main", {
            onInit: function (oEvent) {
              alert("onInit()");
            },
          onAfterRendering: function (oEvent) {
            alert("onAfterRendering");
          }
        });
        var oView = sap.ui.xmlview({
            viewContent: jQuery("#view1").html()
        });
        var oModel = new sap.ui.model.json.JSONModel( {
            data: player
        });
        oView.setModel(oModel);
        oView.placeAt("content");
​
        // Filter table
        var Find = function () {
            var oFilter1 = new sap.ui.model.Filter("name", sap.ui.model.FilterOperator.Contains, document.getElementById("searchFor").value);
            var oFilter2 = new sap.ui.model.Filter("age", sap.ui.model.FilterOperator.Contains, document.getElementById("searchFor").value);
            var allFilter = new sap.ui.model.Filter([oFilter1, oFilter2], false);
            oView.byId("players").getBinding("rows").filter(allFilter);
        }
        
        // Observe if scrolling up or down
          var lastScroll = 0;
      
      setTimeout(function(){
          $("#__xmlview0--players-vsb-sb").scroll(function () {
                  var st = $(this).scrollTop();
            var scrollpos = document.getElementById("__xmlview0--players-vsb-sb");
                  if (st > lastScroll) {
                      console.log("scrolling down");
                  } else {
                      console.log("scrolling up");
                  }
            if(st > document.getElementById("__xmlview0--players-vsb-sb").clientHeight - 20) {
              console.log("works");
            }
                  lastScroll = st;
            console.log(lastScroll);
            console.log(scrollpos.clientHeight);
              });
        }, 900);
​
    </script>
​
</head>
<body class='sapUiBody'>
    <div id='content'></div>
    <input id='searchFor' type="search" />
    <button id="btnFind" onclick="Find()">Find</button>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
abertolipro
0viewers