[Javascript] Navigating an Array of size 1000

Tue Mar 25 07:17:53 CST 2003

I would imagine this question can be broken up into several different pieces.

(1)		First off, the number of displayed rows in a <SELECT> menu can be defined by the SIZE variable,
		<select name='mySelect' size='10' ...> displays 10 rows at once (with some leeway for OPTGROUP 
		headers)

(2)		By using a code snippet similar to the following you can manage the rest --

		function upButton() {
          var myIndex = document.forms[0].myIndex.value;
		  myIndex += 10;
		  if (myIndex > document.forms[0].mySelect.options.length) {
            return;	// do nothing
          }
          document.forms[0].myIndex.value = myIndex;
          document.forms[0].mySelect.selectedIndex = myIndex;
          document.forms[0].mySelect.options[myIndex].selected = 'true';
          document.forms[0].mySelect.options[myIndex].focus();
          return;
		}

		function downButton() {
		  var myIndex = document.forms[0].myIndex.value;
		  myIndex -= 10;
          if (myIndex < 0) {
		    return; // do nothing
		  }
		  document.forms[0].myIndex.value = myIndex;
		  document.forms[0].mySelect.selectedIndex = myIndex;
		  document.forms[0].mySelect.options[myIndex].selected = 'true';
		  document.forms[0].mySelect.options[myIndex].focus();
      	  return;
		}
...

<body>
  <form name='myForm'>
    <input name='myIndex' type='hidden' value=0>
    <select name='mySelect' size=10>
      <option>blah-blah-0>
      ...
      <option>blah-blah-999>
    </select>
    <input type='button' name='up' onClick='upButton()' value='up'>
    <input type='button' name='down' onClick='downButton()' value='down'>
  </form>
</body>

This is ugly code, and doesn't account for folks who scroll manually down beyond the 10 units
displayed before clicking the up/down buttons -- the index counter doesn't account for that.
One way to deal with such irregularities is to set myIndex equal to the 'virtual' page which
contains the most recent selected item before incrementing/decrementing it:

	var myIndex = document.forms[0].mySelect.selectedIndex;
	var myPage = 10 * Math.floor(myIndex/10);
    var myIndex = myPage;

This will take the current selectedIndex (say 34), divide by 10, and round to the nearest lesser
integer (3).  Multiplying it my 10 then tells you that you are on the 'virtual' page beginning
with element 30.

I've included both methods of forcing the index in the select list to account for vagaries in Netscape
and IE, but I'm sure only one will be necessary (or useful) on your actual browser.

-- Dave Lovering

Sachin Zingade wrote:
> 
> Hi All,
> 
> I want an optimized solution for the Below problem
> 
> I have an array that contains 1000 items, my requirement is to navigate 10
> items at once and next 10 the next time.
> that is i have two buttons next and previous, on click of next show first 10
> items, and keep on navigating the array.
> 
> If any one can suggest me a better way to navigate i will be thankfull to
> you
> 
> Regards
> 
> Sachin Z
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript