Populate a dynamic table with data using JQuery

**alex.j.r** · October 19th, 2011, 09:42 AM

Hi All,

I've encountered a problem when trying to dynamically add rows to a table and populating them with data taken from a database. I retrieved a list of objects from the database where each object represents a row, a row that I try to add into the table. Now, I know how to add a row using jquery $('#usersTable').append('<tr>..</tr>') and that works fine.

My question is how I can insert the data from the value-object into the script?
I added in the example what I tried to do, but the browser simple becomes unresponsive and tells me I need to shut down the script. It happened (browser freezing) when I tried it on firefox, explorer and chrome.

Any ideas?

Thanks in advance.

I shrunk down the example to include only one field

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="scripts/jquery-1.6.4.js"></script>
</head>
<%
	HttpSession session = request.getSession(false);
	List<VOUser> users = new ArrayList<VOUser>();
	users = (List<VOUser>) session.getAttribute("users_list");
	for(VOUser user: users){%>
		<script type="text/javascript">
			var user = {
				username:<%=user.getUserName() %> 
			};
			
			$(function(){
				$.getScript('scripts/script.js', function buildRow(user){});
			});	
		</script>	
	<%}
%>
<body>
	<form method="post" action="UserGridSearch">
		<table border="2" id="usersTable">
			<thead>
				<tr>
					<th>User Name</th>
					<th>Search</th>
				</tr>
			</thead>
			<tbody id="bodyTable">
				<tr>
					<td><input type="text" name="username" id="username"/></td>
					<td><input type="submit" name="search" id="submit" value="Search" /></td>
				</tr>
			</tbody>
		</table>
	</form>
</body>
</html>

Edit: A good fellow suggested that I've been going at this the wrong way (Bad coding - Java in JSP) and that I should look toward JSTL and EL for proper solution. Will be glad if someone could post a short example of how to insert a session attr into a tag. Thanks, Alex.

**PeejAvery** · October 21st, 2011, 09:16 AM

Whoa...Never use server-side code in a loop to output client-side code!

Simple move the server-side code into the table and have it output the <tr> and <td> tags directly.

Thread: Populate a dynamic table with data using JQuery

Thread Tools

Display

Populate a dynamic table with data

Re: Populate a dynamic table with data using JQuery

Tags for this Thread

Posting Permissions