Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

how to manipulate PREVIOUS and NEXT buttons to display number of data

Status
Not open for further replies.
zwrley

zwrley

Programmer
Aug 7, 2001
14
PH
I have this array which is given to me by the cgi and they wanted me to control the display in such a way that only 10 records are shown at a time and provide PREVIOUS and NEXT buttons. I need help on this one, I'm not familiar with array manipulation and how I can limit the display on screen and how the PREVIOUS and NEXT button would display the first 10 and next 10 and so on.
Any help is appreciated.

<script language=&quot;javascript&quot;>
myAlign = new Array('left','left', 'left','left','left');
myWidth = new Array(100,150,150,200,200);

myDetail = new Array(
new Array('sad','d','sha','Wed Jun 25 13:59:31 2003','Wed Oct 1 00:00:00 2003'),
new Array('sandra','dy','sandra2','Wed Jun 25 14:23:12 2003','Sat Jan 1 00:00:00 2005'),
new Array('eu_ric_m','d','ric','Fri Jun 27 11:31:53 2003','Wed Oct 1 00:00:00 2003'),
new Array('su_ric_m','d','ric','Fri Jun 27 11:42:55 2003','Sat Nov 1 00:00:00 2003'),
new Array('eu_ric_m2','d','ric','Fri Jun 27 13:57:52 2003','Sat Nov 1 00:00:00 2003'),
new Array('shanghai_end','last','first','Fri Jun 27 17:43:32 2003','Thu Jan 1 00:00:00 2004'),
new Array('usr0630-1','usr0630-1','usr0630-1','Mon Jun 30 11:40:08 2003','Thu Dec 1 00:00:00 2022'),
new Array('testingric','d','ric','Mon Jun 30 17:14:54 2003','Wed Oct 1 00:00:00 2003'),
new Array('eller_d333','r','ric','Mon Jun 30 17:25:12 2003','Fri Aug 1 00:00:00 2003'),
new Array('shaunp','patrick','shaun','Tue Jul 1 14:31:17 2003','Sat Jan 1 00:00:00 2011'),
new Array('shaunp2','patrick','shaun','Tue Jul 1 14:33:35 2003','Sat Jan 1 00:00:00 2011'),
new Array('shaunp3','patrick','shaun','Tue Jul 1 14:35:25 2003','Sat Jan 1 00:00:00 2011'),
new Array('vca_test101','123','l123','Tue Jul 1 19:46:47 2003','Thu Feb 1 00:00:00 2018'),
'END');

// This is my function where I display the data onto the screen.
function display()
{
var str = '<div align=&quot;center&quot;><table id=&quot;tabBody&quot; border=&quot;0&quot; bgcolor=&quot;#000000&quot; text=&quot;#CCCCFF&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot;>'

for (var row in myDetail)
{
i += 1
str += '<tr>'
for (var col in myDetail[row])
{
no = myDetail[row][col]
if (no == null || no == '')
no = ' '
else if (col == 0)
{
str += '<td align=&quot;'+ myAlign[col] +'&quot; width=&quot;' + myWidth[col] + '&quot;>'
str += ' <font size=1>' + no + '>'
str += '</font></td>'
}
else if (col !=0)
{
str += '<td align=&quot;'+myAlign[col]+'&quot; width=&quot;'+myWidth[col] + '&quot;>'
str += '<font size=1>' + no + '</font></td>'
}
}
str += '</tr>'
}

str += '<tr><td colspan=&quot;9&quot; align=&quot;center&quot;> </td></tr>'
str += '<tr><td colspan=&quot;9&quot; align=&quot;center&quot;>'
str += '<div align=&quot;center&quot;>'
str += '</div></td></tr>'
str += '</table></div>'
}
</script>
 
Sort by date Sort by votes
Here's a little piece to get you on the right track, just copy everything in blue into a blank .HTML file and fire it up.
[tt]
<html>
<head>
<script>
var phonebook = new Array(
new Array('Alice','98765432'),
new Array('Betty','98765432'),
new Array('Cindy','98765432'),
new Array('Debbie','98765432'),
new Array('Elizabeth','98765432'),
new Array('Fleur','98765432'),
new Array('Georgia','98765432'),
new Array('Harriet','98765432'),
new Array('Ivy','98765432'),
new Array('Julia','98765432'),
new Array('Karen','98765432'),
new Array('Louisa','98765432'),
new Array('Mary','98765432'),
new Array('Nina','98765432'),
new Array('Olivia','98765432'),
new Array('Penelope','98765432'),
new Array('Queenie','98765432'),
new Array('Rhiannon','98765432'),
new Array('Sara','98765432'),
new Array('Theresa','98765432'),
new Array('Ursula','98765432'),
new Array('Veronica','98765432'),
new Array('Wendy','98765432'),
new Array('Xanthia','98765432'),
new Array('Yasmin','98765432'),
new Array('Zoe','98765432')
);

var pointer = 0;

function drawtable(){
tablehtml = '<table>';
tablehtml = tablehtml + '<tr><td>Name</td><td>Number</td></tr>';
for(x = pointer; x < pointer + 5; x++){
if(x < phonebook.length){
tablehtml = tablehtml + '<tr><td>' + phonebook[x][0] +
'</td><td>' + phonebook[x][1] + '</td></tr>';
}
}
tablehtml = tablehtml + '<tr><td colspan=&quot;2&quot;>';
if((pointer - 5) >= 0){
tablehtml = tablehtml +
'<input type=&quot;button&quot; value=&quot;<<&quot; onClick=&quot;goBack()&quot;>';
}
if((pointer + 5) < phonebook.length){
tablehtml = tablehtml +
'<input type=&quot;button&quot; value=&quot;>>&quot; onClick=&quot;goForth()&quot;>';
}
tablehtml = tablehtml + '</table>';
document.body.innerHTML = tablehtml;
}

function goBack() {
pointer = pointer - 5;
if(pointer < 0){
pointer = 0;
}
drawtable()
}

function goForth() {
pointer = pointer + 5;
if(pointer >= phonebook.length){
pointer = phonebook.length - 5;
}
drawtable()
}

</script>
</head>

<body onLoad=&quot;drawtable()&quot;>

</body>
</html>
[/tt]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
391
Kennelbloke
Kennelbloke
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
365
xwb
xwb
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
324
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
740
Mike Lewis
Mike Lewis
Rayj0000
  • Locked
  • Question
How to disable an html button for subsequent website visitors?
Replies
0
Views
287
Rayj0000
Rayj0000

Part and Inventory Search

Sponsor

Back
Top