XML : limit 12 images displying at a time and automatically create pages for the 10000 rest

I am try to get 12 images to diplay at a time instead of displaying the 10,000. Someone has told me what to do but Im not sure how to do it.

This is what they said to do:

• xmlDoc.getElementsByTagName("video"); length of this array will give you total number of page, say length is x so total number of page is x/12
• You can now create list of page numbers ( 1,2,....n). You can use LI tag or other to dynamically create the list using javascript for loop. In the li put anchor tag for further js page change operation.
• Now create an object array inside the for loop.
• For first page take first 12 element and create 12 rows
• when page 2 or other is clicked you have to take the page number ( that you can get from the link text) and you have to calculate array index. ( remember for page 2 start index will be 12 and end index will be 23 and so on ) Now clear the existing rows and add the new elements. in short pageSize*( pageNum -1 ) ;
• for table creation you can use any template engine (like Handlebar or other)

This is where he said to do it

  <div id="container">  <table id="demo"></table>      <script>    // Initialize  (function() {       loadXMLDoc();   })();     function loadXMLDoc() {    var xmlhttp = new XMLHttpRequest();    xmlhttp.onreadystatechange = function() {      if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {        myFunction(xmlhttp);      }    };    xmlhttp.open("GET", "amateur.xml", true);    xmlhttp.send();  }  function myFunction(xml) {    var i;    var xmlDoc = xml.responseXML;    var table="<tr></tr>";    var x = xmlDoc.getElementsByTagName("video");    for (i = 0; i <x.length; i++) {       var img = x[i].getElementsByTagName("thumbnail")[0].childNodes[0].nodeValue;      var url = x[i].getElementsByTagName("url")[0].childNodes[0].nodeValue;      table +=         "<a href='"+url+"'><img src='"+img+"'></a>";          }    document.getElementById("demo").innerHTML = table;  }  </script>