Forum:

HTML Pages with CSS and JavaScript

Dynamic table jQuery sort adding old rows

Greenhorn

Posts: 9

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Hi,

I need help to fix jquery sortable issue for dynamic table.

I have one customer html table and onclick making db call, then populating the output in dynamic table. Output always change, because it's based on timestamp (don't have any issues with output here.)

Problem comes after populating dynamic rows and when I try to sort by clicking table header getting old records also in the table. Please help.

for example:

First time Dynamic Table shows.

A B C

Second time Dynamic Table shows below when i try to sort. But table suppose to have only D E F row.

A B C
D E F

<html>
  <head>
    <title>Countdown Test</title>
	
<script src="../jsp/jquery-1.9.1.min.js"></script>
<script src="../jsp/jquery.tablesorter.min.js"></script>

$.ajax({
				type : "POST",
				url : "../renderEventPopUp.do",
				dataType : "xml",
				data : "id=getEventData" 
				success : xmlParserEventPopupSuccess,
				failure : xmlParserFailure
			});
		}

function xmlParserEventPopupSuccess(xml) {
		
		$("#EventPopUp").find("tr:gt(0)").remove();
		$("#EventLevelPopUp").dialog({modal: true, height: 590, width: 1005});
		i = 0;
		var newRow;

$(xml).find("EventLevelData").each(function() {
		
			if (i % 2 == 0) {
				newRow = '<tr bgcolor="#D5DEE5"><td>';
			} else {
				newRow = '<tr bgcolor="white"><td>';
			}
			newRow = newRow + $(this).find("CustName").text() + '</td><td>'
			+ $(this).find("LobDesc").text() + '</td><td>'
			+ $(this).find("ReqTS").text() + '</td>' + '</td><td>'
			+ $(this).find("PrsTime").text() + '</td>' + '</td><td>'
			+ $(this).find("EvtName1").text() +'</td>' + '</td><td>'
			+ $(this).find("EvtPrsTime1").text() + '</td>' + '</td><td>'
			+ $(this).find("EvtName2").text() + '</td>' + '</td><td>'
			+ $(this).find("EvtPrsTime2").text() + '</td>' + '</td><td>'
			+ $(this).find("EvtName3").text() + '</td>' + '</td><td>'
			+ $(this).find("EvtPrsTime3").text()  + '</td>' + '</td></tr>';
			
			$('#EventPopUp tbody').append(newRow);
			i++;
		});
		$("#EventPopUp").tablesorter();
	}
	
	function xmlParserFailure(){
	alert("failed");
	}
	function Testing(){
		$("#EventLevelPopUp").hide();
				
	}

</script>
  </head>
  <body onload="Testing();">
  <a href="" onclick="getServiceTablePopUp();">GetCustomerEvent</a>
    
<div id="EventLevelPopUp" style="height: 400px; width: 100%;overflow: scroll;overflow:auto" title="Event Details">
<table align="left" id="EventPopUp" class="eventpopudetails">
	<caption><b>Event Details</b></caption>
	<thead>
		<tr>
			<th>CM Name</th>
			<th>LOBId</th>
			<th>R.Timestamp</th>
			<th>Resp.Time</th>
			<th>Event 1</th>
			<th>E1.Resp.Time</th>
			<th>Event 2</th>
			<th>E2.Resp.Time</th>
			<th>Event 3</th>
			<th>E3.Resp.Time</th>
		</tr>
	</thead>
	<tbody></tbody>
</table>

</div>

</body>
</html>

Thanks.

Jeanne Boyarsky

author & internet detective

Posts: 41967

911

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

As the AJAX example shows, you are appending data each time. If you want to remove data, I think you'd need to re-initialize the table each time. This example shows how to initialize it up front. You'd need to change the code to do it each time.

[OCP 17 book] | [OCP 11 book] | [OCA 8 book] [OCP 8 book] [Practice tests book] [Blog] [JavaRanch FAQ] [How To Ask Questions] [Book Promos]
Other Certs: SCEA Part 1, Part 2 & 3, Core Spring 3, TOGAF part 1 and part 2

Java 8 (verified skill)
Skill verified by Jeanne Boyarsky

JUnit 5 (verified skill)
Skill verified by Jeanne Boyarsky

Kumanan Guna

Greenhorn

Posts: 9

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Jeanne Boyarsky wrote:As the AJAX example shows, you are appending data each time. If you want to remove data, I think you'd need to re-initialize the table each time. This example shows how to initialize it up front. You'd need to change the code to do it each time.

Hi Jeanne,

The example shows those are static tables.

In my case, i get a respose in XML, iterating through out all element in xml and adding each rows in a table. Also before adding any rows, i m deleting all rows in table and start adding new rows.

I don't have any problem in adding and deleting rows in table.

Once data is available in table, when I try to sort table appending with previous results also.

For example, first time i try to sort 10 rows, 2nd time I got a new 3 result and try to sort, table appending with 13 (old + new records). Is there any cache tablesorting storing this information ? Do I need to clear the cache before appending new data ?

Thanks.

Jeanne Boyarsky

author & internet detective

Posts: 41967

911

I like...

posted 11 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

It doesn't sound like you want to append new data. It sounds like you want to do a replace (which is clear the table and add all the existing records.) The reason is that simply appending new data doesn't tell you if data has been deleted from the source table.

Get out of my mind! Look! A tiny ad!

We need your help - Coderanch server fundraiser

https://coderanch.com/wiki/782867/Coderanch-server-fundraiser