一次限制显示12张图像，并自动创建10000张图像的页面

Question

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>

Answer 1

It looks like a homework, hints:

• Create a json array on your loop {"url":url, "img":img};
• Populate the table with the first 12 entries, store the current page index.
• Create a navigation bar << < # > >>. < move previous, << move first, # current page index, > move next, >> move last.

Good luck