Grouplist How to put the data into different page?

Hi guys.
About grouplist, How can I put the data into the different pages? If I have got 40 data, But I just want to show 10 data in the first page. when I click button, the grouplist will show next 10 data. I try to use loadnext() method. But I do not know how to use it.

This is my code.

<!DOCTYPE HTML>
<html>
	<head>
		<link rel="stylesheet" href="codebase/touchui.css" >
		<script src="codebase/touchui.js" type="text/javascript"></script>
		<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0">
		<title>DHTML Touch</title>
	</head>
	<body>
		<script type="text/javascript">
		
		var data1=[
				 
				{id:'data101',name:'s1',email:"s.com"},
				{id:'data102',name:'h1',email:"h.com"},
				{id:'data103',name:'u1',email:"u.com"},
				{id:'data104',name:'z1',email:"z.com"},
				{id:'data105',name:'h1',email:"h.com"},
				{id:'data106',name:'a1',email:"a.com"},
				{id:'data107',name:'n1',email:"n.com"},
				{id:'data108',name:'y1',email:"y.com"},
				{id:'data109',name:'a1',email:"a.com"},
				{id:'data110',name:'n1',email:"n.com"},
				{id:'data111',name:'g1',email:"g.com"},
				{id:'data112',name:'j1',email:"j.com"},
				{id:'data113',name:'i1',email:"i.com"},
				{id:'data114',name:'e1',email:"e.com"},
				{id:'data115',name:'e1',email:"e.com"},
				{id:'data116',name:'e1',email:"e.com"},
				{id:'data117',name:'e1',email:"e.com"},
				{id:'data118',name:'e1',email:"e.com"},
				{id:'data119',name:'e1',email:"e.com"},
				{id:'data120',name:'e1',email:"e.com"},
				{id:'data121',name:'e1',email:"e.com"},
				{id:'data122',name:'e1',email:"e.com"},
				{id:'data123',name:'e1',email:"e.com"},
				{id:'data124',name:'e1',email:"e.com"},
				{id:'data125',name:'e1',email:"e.com"},
				{id:'data126',name:'e1',email:"e.com"},
				{id:'data127',name:'e1',email:"e.com"},
				{id:'data128',name:'e1',email:"e.com"},
				{id:'data129',name:'e1',email:"e.com"},
				{id:'data130',name:'e1',email:"e.com"},
				{id:'data131',name:'e1',email:"e.com"},
				{id:'data132',name:'e1',email:"e.com"},
				{id:'data133',name:'e1',email:"e.com"},
				{id:'data134',name:'e1',email:"e.com"},
				{id:'data135',name:'e1',email:"e.com"},
				{id:'data136',name:'e1',email:"e.com"},
				{id:'data137',name:'e1',email:"e.com"},
				{id:'data138',name:'e1',email:"e.com"},
				{id:'data139',name:'e1',email:"e.com"},
				{id:'data140',name:'e1',email:"e.com"},
				
				
				
				];
	 
		
		dhx.ui({
			rows:[{view:"button",label:"next",click:"next"},
			{view:"grouplist",template:"#name#__#email#",datatype:"json",data:data1,
				 select:true,id:"mylist"}]
		})
		
		function next()
		{
		   alert("how to do?");
		}
		 
		 
</script>
	</body>
</html>



Hi,

Please have a look at the samples:

dhtmlxTouch_v10_111114/samples/technical/list/20_dyn_loading.html
dhtmlxTouch_v10_111114/samples/technical/list/21_page_loading.html