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

Code:

<!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

Originally Posted by lord22

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:

Code:

<!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>

Thread: Divide table to pages

Thread Tools

Search Thread

Divide table to pages

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following 2 Users Say Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions