Forum:

how to implement dynamic rows paging when user clicks next or previous links

Ranch Hand

Posts: 30

posted 15 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

I am trying to implement dynamic rows paging.just imagine for a particular booking id lets say 22 records are there in the database.
per page i am displaying 10 records.if you see the HTML code as per sample its showing only 3 records .but in real it will display 10 records per page.in 3rd page it will display 2 records.don't bother abt paging.its working fine.

my problem is when user added or removed any rows and clicks next link and comes back to first page the values should be present. how the names should be given for the textboxes and checkboxes to read values in the form when user click next page?

when user clicks next or previous link i will read not only form values but also call fresh DB call against respective booking id(why because in between any other user can add or remove records for that booking id).after that i need to compare database values and the values that are added or removed in the page.below code shows that.

when user clicks next page in the servlet the code will be like this.First it will read the values in the form and after that it will take the fresh values from DB for the booking id.

how to compare the requestList and databaseList?for example some rows are removed in the page and user clicks next link we will read the values and store it in requestList then i need to compare all values in requestList against databaseList?if that value doesn't exist then i remove that value from databaseList.finally i will display databaseList in the form.

does below code serve the purpose?;

in the servlet code i am using request.getParameterValues that means i have given same name for texboxes .is it ok;

this is table structure;ID is unique.Is the table structure is ok?

checkbox values will be unique.first checkbox id will be "houseCheck1" and value is 1;.second checkbox id will be "houseCheck2" and value is 2 and so on;

create table TEMP_CONTAINER_DTLS
(
  CONTAINER_TYPE   VARCHAR2(15),
  CONTAINER_NUMBER VARCHAR2(50),
  CONTAINER_DESC   VARCHAR2(50),
  CONTAINER_ID     VARCHAR2(15),
  ID               NUMBER not null
);
-- Create/Recreate primary, unique and foreign key constraints 
alter table TEMP_CONTAINER_DTLS
  add constraint ID_PK primary key (ID);
 
 
 
 
if(link.equals("Next"))
{
 String containerType[]= request.getParameterValues("ContainerType");
    		String containerNumber[]= request.getParameterValues("ContainerNumber");
    		String containerDesc[]= request.getParameterValues("ContainerDescription");
    	
    		ArrayList requestList = new ArrayList();
    		ContainerDetails cdtls=null;
				if(containerType != null && containerType.length > 0)
				{
					for (int i = 0; i < containerDesc.length; i++) {
						 cdtls= new ContainerDetails();
						 cdtls.setContainerType(containerType[i]);
						 cdtls.setContainerNumber(containerNumber[i]);
						 cdtls.setContainerDesc(containerDesc[i]);
						 requestList.add(cdtls);
						 }
    			}
  ArrayList  	dataBaseList=	dao.getBookingDetails(bookingId);
 
}
 
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
   <BODY>
      <form id="frm"  name="frm" action="TestController">
 
   
  <script>
 table=document.createElement("table");
	table.setAttribute("id","TableA");
	table.setAttribute("border","0");
	table.setAttribute("width","50%");
	table.bgColor="lightblue"
    body = document.createElement("tbody");
 
    row =document.createElement("tr");
	    cell11 =document.createElement("td");
	selectAll= document.createElement("input");
	selectAll.setAttribute("type","checkbox");
	selectAll.setAttribute("id","selectAll");
	selectAll.setAttribute("name","selectAll");
	selectAll.setAttribute("width","5%");
	selectAll.onclick= function(){ selectAllCheck(); }
	cell11.appendChild(selectAll);
    row.appendChild(cell11);
 
    cell0 =document.createElement("td");
    cell0.appendChild(document.createTextNode('Sno'));
	cell0.setAttribute("id","Sno");
	cell0.setAttribute("width","5%");
    row.appendChild(cell0);
 
 
    cell1 =document.createElement("td");
    cell1.appendChild( document.createTextNode('ContainerType'));
	cell1.setAttribute("width","10%");
	cell1.setAttribute("font-style" ,"italic");
    row.appendChild(cell1);
 
   cell2 =document.createElement("td");
   cell2.setAttribute("width","10%");
    cell2.appendChild( document.createTextNode('ContainerNumber'));
    row.appendChild(cell2);
 
	cell3 =document.createElement("td");
	cell3.setAttribute("width","20%");
    cell3.appendChild( document.createTextNode('ContainerDescription'));
    row.appendChild(cell3);
	body.appendChild(row);
 
dynamicRows =function ()
{
  
		
     form = (( document.getElementById ) ? document.getElementById("frm") : document.all.frm );
    form.appendChild(table);
 
	row1 =document.createElement("tr");
 
 
    cell10 =document.createElement("td");
	check= document.createElement("input");
	check.setAttribute("type","checkbox");
	check.setAttribute("name","houseCheck");
	check.setAttribute("id","houseCheck1");
	check.setAttribute("value",'1');
 
 
	check.onclick= function(){ handleSelectedCheckBox(this); }
 
    cell10.appendChild(check);
 
    form.appendChild(cell10);
    row1.appendChild(cell10);
 
 
    cell8 =document.createElement("td");
	cell8.appendChild(document.createTextNode('1'));
	row1.appendChild(cell8);
 
 
 
    cell4 =document.createElement("td");
	select =document.createElement("select");
	select.setAttribute("name","ContainerType");
	select.setAttribute("id","ContainerType0");
 
	option =document.createElement("option");
	option.setAttribute("value","20F");
	option.appendChild(document.createTextNode("20F"));
	select.appendChild(option);
	    form.appendChild(select);
 
 
	option =document.createElement("option");
	option.setAttribute("value","40H");
	option.appendChild(document.createTextNode("40H"));
	select.appendChild(option);
   form.appendChild(select);
	option =document.createElement("option");
	option.setAttribute("value","60L");
	option.appendChild(document.createTextNode("60L"));
	select.appendChild(option);
     form.appendChild(select);
	option =document.createElement("option");
	option.setAttribute("value","80M");
	option.appendChild(document.createTextNode("80M"));
	select.appendChild(option);
    form.appendChild(select);
    cell4.appendChild(select);
    row1.appendChild(cell4);
 
    cell5 =document.createElement("td");
	ContainerInput= document.createElement("input");
	ContainerInput.setAttribute("type","text");
	ContainerInput.setAttribute("name","ContainerNumber");
	ContainerInput.setAttribute("id","ContainerNumber");
	ContainerInput.setAttribute("value",'CONATIONER156');
    cell5.appendChild(ContainerInput);
    form.appendChild(cell5);
 
    row1.appendChild(cell5);
 
 
    cell6 =document.createElement("td");
	ContainerDesc= document.createElement("input");
	ContainerDesc.setAttribute("type","text");
	ContainerDesc.setAttribute("name","ContainerDescription");
	ContainerInput.setAttribute("id","ContainerDescription");
	ContainerDesc.setAttribute("value",'TU');
 
    cell6.appendChild(ContainerDesc);
    form.appendChild(cell6);
    row1.appendChild(cell6);
 
	cell7 =document.createElement("td");
	add= document.createElement("input");
	add.setAttribute("type","button");
	add.setAttribute("name","add");
	add.setAttribute("value","+");
	add.onclick = function(){ addRow(); }
    cell7.appendChild(add);
	 form.appendChild(cell7);
 
    row1.appendChild(cell7);
 
	 cell9 =document.createElement("td");
			remove= document.createElement("input");
			remove.setAttribute("type","button");
			remove.setAttribute("id","remove");
			remove.setAttribute("name","remove");
			remove.setAttribute("value","-");
	
			remove.onclick = function(){  
					removeRow(this);
			};
 
 
			cell9.appendChild(remove);
			row1.appendChild(cell9);
 
		 	body.appendChild(row1);
 
 
     form = (( document.getElementById ) ? document.getElementById("frm") : document.all.frm );
    form.appendChild(table);
 
	row1 =document.createElement("tr");
 
 
    cell10 =document.createElement("td");
	check= document.createElement("input");
	check.setAttribute("type","checkbox");
	check.setAttribute("name","houseCheck");
	check.setAttribute("id","houseCheck2");
	check.setAttribute("value",'2');
 
 
	check.onclick= function(){ handleSelectedCheckBox(this); }
 
    cell10.appendChild(check);
 
    form.appendChild(cell10);
    row1.appendChild(cell10);
 
 
    cell8 =document.createElement("td");
	cell8.appendChild(document.createTextNode('2'));
	row1.appendChild(cell8);
 
 
 
    cell4 =document.createElement("td");
	select =document.createElement("select");
	select.setAttribute("name","ContainerType");
	select.setAttribute("id","ContainerType1");
 
	option =document.createElement("option");
	option.setAttribute("value","20F");
	option.appendChild(document.createTextNode("20F"));
	select.appendChild(option);
	    form.appendChild(select);
 
 
	option =document.createElement("option");
	option.setAttribute("value","40H");
	option.appendChild(document.createTextNode("40H"));
	select.appendChild(option);
   form.appendChild(select);
	option =document.createElement("option");
	option.setAttribute("value","60L");
	option.appendChild(document.createTextNode("60L"));
	select.appendChild(option);
     form.appendChild(select);
	option =document.createElement("option");
	option.setAttribute("value","80M");
	option.appendChild(document.createTextNode("80M"));
	select.appendChild(option);
    form.appendChild(select);
    cell4.appendChild(select);
    row1.appendChild(cell4);
 
    cell5 =document.createElement("td");
	ContainerInput= document.createElement("input");
	ContainerInput.setAttribute("type","text");
	ContainerInput.setAttribute("name","ContainerNumber");
	ContainerInput.setAttribute("id","ContainerNumber");
	ContainerInput.setAttribute("value",'CONATIONER14444');
    cell5.appendChild(ContainerInput);
    form.appendChild(cell5);
 
    row1.appendChild(cell5);
 
 
    cell6 =document.createElement("td");
	ContainerDesc= document.createElement("input");
	ContainerDesc.setAttribute("type","text");
	ContainerDesc.setAttribute("name","ContainerDescription");
	ContainerInput.setAttribute("id","ContainerDescription");
	ContainerDesc.setAttribute("value",'TUT');
 
    cell6.appendChild(ContainerDesc);
    form.appendChild(cell6);
    row1.appendChild(cell6);
 
	cell7 =document.createElement("td");
	add= document.createElement("input");
	add.setAttribute("type","button");
	add.setAttribute("name","add");
	add.setAttribute("value","+");
	add.onclick = function(){ addRow(); }
    cell7.appendChild(add);
	 form.appendChild(cell7);
 
    row1.appendChild(cell7);
 
  cell9 =document.createElement("td");
			remove= document.createElement("input");
			remove.setAttribute("type","button");
			remove.setAttribute("id","remove");
			remove.setAttribute("name","remove");
			remove.setAttribute("value","-");
	
			remove.onclick = function(){  
					removeRow(this);
			};
 
 
			cell9.appendChild(remove);
			row1.appendChild(cell9);
 
		 	body.appendChild(row1);
 
 
     form = (( document.getElementById ) ? document.getElementById("frm") : document.all.frm );
    form.appendChild(table);
 
	row1 =document.createElement("tr");
 
 
    cell10 =document.createElement("td");
	check= document.createElement("input");
	check.setAttribute("type","checkbox");
	check.setAttribute("name","houseCheck");
	check.setAttribute("id","houseCheck3");
	check.setAttribute("value",'3');
 
 
	check.onclick= function(){ handleSelectedCheckBox(this); }
 
    cell10.appendChild(check);
 
    form.appendChild(cell10);
    row1.appendChild(cell10);
 
 
    cell8 =document.createElement("td");
	cell8.appendChild(document.createTextNode('3'));
	row1.appendChild(cell8);
 
 
 
    cell4 =document.createElement("td");
	select =document.createElement("select");
	select.setAttribute("name","ContainerType");
	select.setAttribute("id","ContainerType2");
 
	option =document.createElement("option");
	option.setAttribute("value","20F");
	option.appendChild(document.createTextNode("20F"));
	select.appendChild(option);
	    form.appendChild(select);
 
 
	option =document.createElement("option");
	option.setAttribute("value","40H");
	option.appendChild(document.createTextNode("40H"));
	select.appendChild(option);
   form.appendChild(select);
	option =document.createElement("option");
	option.setAttribute("value","60L");
	option.appendChild(document.createTextNode("60L"));
	select.appendChild(option);
     form.appendChild(select);
	option =document.createElement("option");
	option.setAttribute("value","80M");
	option.appendChild(document.createTextNode("80M"));
	select.appendChild(option);
    form.appendChild(select);
    cell4.appendChild(select);
    row1.appendChild(cell4);
 
    cell5 =document.createElement("td");
	ContainerInput= document.createElement("input");
	ContainerInput.setAttribute("type","text");
	ContainerInput.setAttribute("name","ContainerNumber");
	ContainerInput.setAttribute("id","ContainerNumber");
	ContainerInput.setAttribute("value",'CONATIONER14766');
    cell5.appendChild(ContainerInput);
    form.appendChild(cell5);
 
    row1.appendChild(cell5);
 
 
    cell6 =document.createElement("td");
	ContainerDesc= document.createElement("input");
	ContainerDesc.setAttribute("type","text");
	ContainerDesc.setAttribute("name","ContainerDescription");
	ContainerInput.setAttribute("id","ContainerDescription");
	ContainerDesc.setAttribute("value",'6gjgj');
 
    cell6.appendChild(ContainerDesc);
    form.appendChild(cell6);
    row1.appendChild(cell6);
 
	cell7 =document.createElement("td");
	add= document.createElement("input");
	add.setAttribute("type","button");
	add.setAttribute("name","add");
	add.setAttribute("value","+");
	add.onclick = function(){ addRow(); }
    cell7.appendChild(add);
	 form.appendChild(cell7);
 
    row1.appendChild(cell7);
 
  cell9 =document.createElement("td");
			remove= document.createElement("input");
			remove.setAttribute("type","button");
			remove.setAttribute("id","remove");
			remove.setAttribute("name","remove");
			remove.setAttribute("value","-");
	
			remove.onclick = function(){  
					removeRow(this);
			};
 
 
			cell9.appendChild(remove);
			row1.appendChild(cell9);
		 	body.appendChild(row1);
 
 
 
}
 
	table.appendChild(body);
    document.body.appendChild(table);
   dynamicRows();
		
 
  function addRow()
  {
	
	 var tbl = document.getElementById('TableA');
	  var lastRow = tbl.rows.length;
	  if(lastRow > 10)
	  {
		  alert("You can't add rows more than 10");
		  return false;
	  }
	  // if there's no header row in the table, then iteration = lastRow + 1
	  var iteration = lastRow;
	  var row = tbl.insertRow(lastRow);
 
	    var cellRight = row.insertCell(0);
	  var el = document.createElement('input');
	  el.type = 'checkbox';
	  el.name = 'houseCheck';
	  el.id = 'houseCheck'+iteration;
	  el.size = 40;
	  cellRight.appendChild(el);
	  
	  
	  // left cell
	  var cellLeft = row.insertCell(1);
	  var textNode = document.createTextNode(iteration);
	  cellLeft.appendChild(textNode);
	  
	  	  // select cell
	  var cellRightSel = row.insertCell(2);
	  var sel = document.createElement('select');
	  sel.name = 'ContainerType';
	  sel.options[0] = new Option('20F', '20F');
	  sel.options[1] = new Option('40H', '40H');
      sel.options[2] = new Option('60L', '60L');
	  sel.options[3] = new Option('80M', '80M');
	  cellRightSel.appendChild(sel);
 
	  // right cell
	  var cellRight = row.insertCell(3);
	  var el = document.createElement('input');
	  el.type = 'text';
	  el.name = 'ContainerNumber'
	  el.id = 'ContainerNumber' + iteration;
	  el.size = 20;
	  cellRight.appendChild(el);
	  
		  // right cell
	  var cellRight = row.insertCell(4);
	  var el = document.createElement('input');
	  el.type = 'text';
	  el.name = 'ContainerDescription';
	  el.id = 'ContainerDescription' + iteration;
	  el.size = 20;
	  cellRight.appendChild(el);
	  
	  	  // right cell
	  var cellRight = row.insertCell(5);
	  var el = document.createElement('input');
	  el.type = 'button';
	  el.name = 'add';
	  el.id = 'add';
	  el.value = "+";
	  el.onclick = function(){  
					addRow(this);
			};
	  cellRight.appendChild(el);
 
	   var cellRight = row.insertCell(6);
	  var el = document.createElement('input');
	  el.type = 'button';
	  el.name = 'remove';
	  el.id = 'remove';
	  el.value = "-";
  	  el.onclick = function(){  
					removeRow(this);
		};
	  cellRight.appendChild(el);
  }
 
  function removeRow(theRow){
 
		var tab=document.getElementById('TableA');
		index= theRow.parentNode.parentNode.rowIndex;
		tab.deleteRow(index);
 
		for(i=1;i<tab.rows.length;i++)
		{
			tab.rows[i].cells[1].innerHTML=i;
		}
 
 
}
 
  ></script>
   
 	<table    border=0 class=TABLE id="pageTable">
 		<tr>
 			<td class=formdata  >
  
 				
 					 <a id='nextLink'   rel="nofollow">Next>></a> 
 				
 		1 to 10 of 22 Records
 			</td>
 			<td class=formdata  >Total Number of Records : 22</td>
 		</tr>
 		<td class=formdata  >
 		<input type="submit" name="submit1" value="submit1">
 </td></tr>
 		</table> 
 
	
	<input type="hidden" name="operation" value="Modify">
<input type="hidden" name="cnt">
 
 </form>
 
 </BODY>
</HTML>

I'm all tasted up for a BLT! This tiny ad wants a monte cristo!

Gift giving made easy with the permaculture playing cards

https://coderanch.com/t/777758/Gift-giving-easy-permaculture-playing