paging navigators UI design issue

[noamwegner]

i wrote a paging script for HTML table that suppose to hold up to 5000 result rows
and i am displaying for each page 100 rows what makes it ugly to see 50 page navigators
so what i did was to display 5 each time
the idea is like this

function ShowOrHidePageNav(navId)
{
   var currNavNum = document.getElementById(navId).innerText; 
   if (parseInt(currNavNum) % 5 == 0) // so we need to show the next 5 navigators  
      {
          // hiding the previous 5 navigators
          for(var i = currNavNum - 1;i >= (currNavNum - 5) && i != 0;i--)
          {
             var refToHide = document.getElementById("navigator-" + i);
             refToHide.style.display = "none";
          }
          // Showing the next 5 navigators
          for(var i = currNavNum + 1;i <= (currNavNum + 5);i++)
          {
             var refToShow = document.getElementById("navigator-" + i);
             refToShow.style.display = "inline";
          }          
      }  
}

the problems are
first
the hided ones still takes their place on the screen
meaning that if it was 1000 rows so 10 navigators
it will look like this
prev 1 2 3 4 5 next
with all the blank area in the end
second
which is related to the first problem
is that that the vavigators are moving on the screen
if it was
prev 1 2 3 4 5 next
and the user pressed on 5 now it will be
prev 5 6 7 8 9 10 next
amazingly ugly

anyone has a sulotion for that??

[flexibleres]

very nice cod eand good try to make navigators but, I think you have to add 1 to the currNavNum before displaying next 5 navigators....

test and see the result..