Jump to content

Splitting a table


Intercepted
 Share

Recommended Posts

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

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?

Edited by Intercepted
Link to comment
Share on other sites

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.

Edited by thescientist
Link to comment
Share on other sites

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.

Edited by thescientist
Link to comment
Share on other sites

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.

Edited by biomechanic
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...