PDA

View Full Version : Divide table to pages



d-machine
09-30-2008, 11:55 AM
Hi

I have a table, which contains 120 lines.

I want to display it on few pages and not in one.

In every page I want to display not more than 50 lines.

That means:

on first page: 50 lines
on the second page: 50 lines
on the third: 20 lines

How can I do it, using javascript, while assuming I should add more lines to my table, so it can be more than 120 lines...

Thank you in advance! :)

jscheuer1
09-30-2008, 04:10 PM
You cannot literally do that with javascript without a lot of stuff that you probably should not do. You could divide it up into however many tables that it needs to be and make only one of those tables display at a time, or better still, not divide it at all, simply set its style dynamically so that only 50 rows or less could be displayed within it at a time, with next and previous buttons to activate the style changes.

Would that be acceptable?

d-machine
09-30-2008, 06:14 PM
Definitely, how can do it?

jscheuer1
09-30-2008, 06:24 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Paginate Table Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* All Styles Optional */
.tdiv {
float: left;
margin-right: 1em;
}
</style>
<script type="text/javascript">

/* Paginate Table Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

// you can init as many tables as you like in here by id: paginateTable('id', 0, num_max_rows);
paginateTable.init = function(){ // remove any not used
paginateTable('test1', 0, 4);
paginateTable('test2', 0, 3);
};

////////////////////// Stop Editing //////////////////////

function paginateTable(table, way, max){
max? paginateTable.max[table] = max : max = paginateTable.max[table];
way = way == 1? 1 : way == -1? 0 : -1;
var r = document.getElementById(table).rows, i = 0;
for(i; i < r.length; ++i) // find current start point
if(r[i].style.display != 'none')
break;
for(i; i < r.length; ++i){ // continue on to find current end point
if(r[i].style.display == 'none'){
paginateTable.endPoint[table] = i;
break;
};
paginateTable.endPoint[table] = 0; // if no end point found, table is 'virgin' or at end
};
if(way == 1 && r[r.length - 1].style.display != 'none') return; // table was already at the end and we tried to move forward
// if moving forward, start will be old end, else start will be old start - max or 0, whichever is greater:
paginateTable.startPoint[table] = way? paginateTable.endPoint[table] : Math.max( 0, paginateTable.startPoint[table] - max);
paginateTable.endPoint[table] = paginateTable.startPoint[table] + --max; // new end will be new start + max - 1
for (i = r.length - 1; i > -1; --i) // set display of rows based upon whether or not they are in range of the calculated start/end points
r[i].style.display = i < paginateTable.startPoint[table] || i > paginateTable.endPoint[table]? 'none' : '';
};

paginateTable.startPoint = {};
paginateTable.endPoint = {};
paginateTable.max = {};

if(window.addEventListener)
window.addEventListener('load', paginateTable.init, false);
else if (window.attachEvent)
window.attachEvent('onload', paginateTable.init);

//////////////// End Paginate Table Script ///////////////

</script>
</head>
<body>
<div class="tdiv">
<input type="button" value="Next" onclick="paginateTable('test1', 1);">
<input type="button" value="Previous" onclick="paginateTable('test1', -1);">
<table id="test1">
<tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</div>
<div class="tdiv">
<input type="button" value="Next" onclick="paginateTable('test2', 1);">
<input type="button" value="Previous" onclick="paginateTable('test2', -1);">
<table id="test2">
<tr>
<td>0</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
<tr>
<td>5</td>
</tr>
<tr>
<td>6</td>
</tr>
<tr>
<td>7</td>
</tr>
<tr>
<td>8</td>
</tr>
<tr>
<td>9</td>
</tr>
<tr>
<td>10</td>
</tr>
</table>
</div>

</body>
</html>

Any questions, just ask.

d-machine
10-11-2008, 09:16 AM
A bit late- but thank you very much !

lord22
10-14-2008, 06:04 AM
Hi
I've tried to edit this code in order to use it with list and not table.
However, I didn't succeed in that.

Can anyone help me?

Thanks in advance. :)

jscheuer1
10-21-2008, 06:18 AM
Hi
I've tried to edit this code in order to use it with list and not table.
However, I didn't succeed in that.

Can anyone help me?

Thanks in advance. :)

Show us what you've got, or better yet - give us a link to the page. Generally it would be about the same except that I don't believe there is any direct correlative for rows in lists. But you could use getElementsByTagName('li') as a reasonable substitute.

jscheuer1
10-21-2008, 06:31 AM
OK, just whipped this up, mostly via search and replace in the old code editor, seems to work fine:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Paginate List Script - Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
/* All Styles Optional */
.ldiv {
float: left;
margin-right: 1em;
}
</style>
<script type="text/javascript">

/* Paginate List Script 2008 John Davenport Scheuer
as first seen in http://www.dynamicdrive.com/forums/
username: jscheuer1 - This Notice Must Remain for Legal Use
*/

// you can init as many lists as you like in here by id: paginateList('id', 0, num_max_items);
paginateList.init = function(){ // remove any not used
paginateList('test1', 0, 4);
paginateList('test2', 0, 3);
};

////////////////////// Stop Editing //////////////////////

function paginateList(list, way, max){
max? paginateList.max[list] = max : max = paginateList.max[list];
way = way == 1? 1 : way == -1? 0 : -1;
var l = document.getElementById(list).getElementsByTagName('li'), i = 0;
for(i; i < l.length; ++i) // find current start point
if(l[i].style.display != 'none')
break;
for(i; i < l.length; ++i){ // continue on to find current end point
if(l[i].style.display == 'none'){
paginateList.endPoint[list] = i;
break;
};
paginateList.endPoint[list] = 0; // if no end point found, list is 'virgin' or at end
};
if(way == 1 && l[l.length - 1].style.display != 'none') return; // list was already at the end and we tried to move forward
// if moving forward, start will be old end, else start will be old start - max or 0, whichever is greater:
paginateList.startPoint[list] = way? paginateList.endPoint[list] : Math.max( 0, paginateList.startPoint[list] - max);
paginateList.endPoint[list] = paginateList.startPoint[list] + --max; // new end will be new start + max - 1
for (i = l.length - 1; i > -1; --i) // set display of list items based upon whether or not they are in range of the calculated start/end points
l[i].style.display = i < paginateList.startPoint[list] || i > paginateList.endPoint[list]? 'none' : '';
};

paginateList.startPoint = {};
paginateList.endPoint = {};
paginateList.max = {};

if(window.addEventListener)
window.addEventListener('load', paginateList.init, false);
else if (window.attachEvent)
window.attachEvent('onload', paginateList.init);

//////////////// End Paginate List Script ///////////////

</script>
</head>
<body>
<div class="ldiv">
<input type="button" value="Next" onclick="paginateList('test1', 1);">
<input type="button" value="Previous" onclick="paginateList('test1', -1);">
<ul id="test1">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>
<div class="ldiv">
<input type="button" value="Next" onclick="paginateList('test2', 1);">
<input type="button" value="Previous" onclick="paginateList('test2', -1);">
<ul id="test2">
<li>0</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
</div>

</body>
</html>