<!Doctype html>
<html>
<head>
<script>
// global object json
var jsonStore = {
/* All total items */
items : 10,
/* index point to data objects */
cursor : -1,
/* move to first data object. */
moveFirst:function(){
this.cursor = 0;
},
/* move to last data object. */
moveLast:function(){
this.cursor = (this.items - 1);
},
/* move to next 1 data object. */
moveNext:function(){
if(this.cursor < (this.items - 1)){
this.cursor++;
}
},
/* move to back 1 data object. */
moveBack:function(){
if(this.cursor > (this.items-this.items)){
this.cursor--;
}
},
/* return value from current data object. */
getValue : function(/* string */ field){
var v = null;
v = eval("this.datas[this.cursor]."+field);
return v;
},
// template field data column
fields:{ID : "id", NAME : "name"},
// array data
datas:[{
id:1,
name:"item one"
},
{
id:2,
name:"item two"
},{
id:3,
name:"item three"
},{
id:4,
name:"item four"
},{
id:5,
name:"item five"
},{
id:6,
name:"item six"
},{
id:7,
name:"item saven"
},{
id:8,
name:"item eight"
},{
id:9,
name:"item nine"
},{
id:10,
name:"item ten"
}]
};
// Initialize to use json data object on screen browser
jsonStore.moveFirst();
// function to re
function renderNext(){
jsonStore.moveNext();
document.getElementById('x').value = jsonStore.getValue('id')+ "," + jsonStore.getValue('name');
}
function renderBack(){
jsonStore.moveBack();
document.getElementById('x').value = jsonStore.getValue('id')+ "," + jsonStore.getValue('name');
}
/* call render for get some data to screen
and can press on button to move next data cursor
*/
</script>
</head>
<body>
<input type="text" id="x" value="value will display here..." />
</br>
<button onclick="renderNext();" >Move Next</button>
<button onclick="renderBack();" >Move Back</button>
</body>
</html>
Load balance : Server 05
