Jump to content

Splitting a table

Intercepted

By Intercepted
in HTML/XHTML

Recommended Posts

thescientist w3schools Guru

thescientist

Posted
Posted

you would probably need Javascript to do something like that. Why not just not set a max width and the let the bottom of the webpage expand dynamically depending on the length of the table?

Link to comment
Share on other sites
Intercepted Newbie

Intercepted

Posted
  • Author
Posted

I'd like it to be easy to read without scrolling down a long list. The table is going to be a phone book pretty much. I would just use ctrl+F to find the name I'm looking for but a lot of people are going to be using this list and most of them don't know what ctrl+F is.Any ideas on how I would use javascript to make continuous parallel tables?

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

implementing pagination functionality is your best bet. Can be done with javacript and/or PHP. Implementing some server-side functinality would be ideal, depending on the amount of data to be displayed. Ideally, a combination of the two would be best, wherein you pass the page offset to PHP via AJAX, and it returns to you only the data to be displayed for the given page. You can have PHP construct the HTML and just have javascript update the innerHTML of the element holding the display content.

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted

not so much difficult, per se, but more inefficient than anything. With just javascript, it would be in charge of loading ALL the date, (if needed) sorting it, parsing it, constructing the HTML, and rendering it. With small amounts of data, this might not be an issue. As the data set grows however, as to will the load times grow exponentially. With the assistance of a server side language, you could request only the data you need to show, have the server do all the grunt work, and the just return the HTML to be rendered. The logic for doing the constructing, offsetting will be roughly the same, more or less. It will just require different approaches to planning and executing. Either way, it's not something that's quick and easy to do, unless you have good mastery of programming basics.

Link to comment
Share on other sites
mambabomba Newbie

mambabomba

Posted
Posted

Making a simple paging is really not that hard with JavaScript. Even easier if you use jQuery.Here's an example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="content-type" content="text/html;charset=utf-8" />		<script type="text/javascript" src="jquery-1.6.2.min.js"></script>		<style>			.pageNumbers span {cursor:pointer;}			.pageNumbers span.active {font-weight:bold;}		</style>	</head>	<body>		<div class="pageNumbers">			<span class="active">1</span> <span>2</span> <span>3</span>		</div>		<table>			<tr class="page1"><td>row 1</td></tr>			<tr class="page1"><td>row 2</td></tr>			<tr class="page2" style="display:none;"><td>row 3</td></tr>			<tr class="page2" style="display:none;"><td>row 4</td></tr>			<tr class="page3" style="display:none;"><td>row 5</td></tr>			<tr class="page3" style="display:none;"><td>row 6</td></tr>		</table>		<script type="text/javascript">			var currentPage = "1";			$('.pageNumbers>span').click(function(){				var newPage = $(this).text();				if (newPage != currentPage){					$('.page'+currentPage).hide();					$('.page'+newPage).show();					$('.pageNumbers>span').removeClass('active');					$(this).addClass('active');					currentPage = newPage;				}			});		</script>	</body></html>

Edit:If you'd rather filter the rows by text, you could do something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">	<head>		<meta http-equiv="content-type" content="text/html;charset=utf-8" />		<script type="text/javascript" src="jquery-1.6.2.min.js"></script>	</head>	<body>		<div>			<input id="txtFilter"/><input type="button" id="btnApplyFilter" value="Apply filter"/><br/>			<span id="spanCurrentFilter">No filter applied.</span>		</div>		<table>			<tr><th>Name</th></tr>			<tr><td>John</td></tr>			<tr><td>Steve</td></tr>			<tr><td>Johnson</td></tr>			<tr><td>Joanne</td></tr>			<tr><td>Banjo</td></tr>			<tr><td>Rudy</td></tr>		</table>		<script type="text/javascript">			$('#btnApplyFilter').click(function(){				var searchPhrase=$('#txtFilter').val();				if (searchPhrase != null && searchPhrase.length>0){					$('td').each(function(){						if ($(this).text().toLowerCase().indexOf(searchPhrase.toLowerCase()) > -1) {							$(this).closest('tr').show();						}						else {							$(this).closest('tr').hide();						}					});					$('#spanCurrentFilter').text('Current filter: '+searchPhrase);				}				else {					$('tr').show();					$('#spanCurrentFilter').text('No filter applied.');				}			});		</script>	</body></html>

I've got no access to a host at the moment so I can't upload live demos. Just copy paste the examples into .html files and remember to drop jquery-1.6.2.min.js in the same folder. You can get it from jquery.com.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...