SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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 u 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;
    Code:
    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 width='50%' cellpadding=0 cellspacing=0 border=0 class=TABLE id="pageTable">
    		<tr>
    			<td class=formdata align=left >
     
    				
    					&nbsp;<a id='nextLink' title='ALT+->' href="javascript:onClick=FetchAir('null',2)">Next&gt;&gt;</a>&nbsp;
    				
    		1 to 10 of 22 Records
    			</td>
    			<td class=formdata align=right >Total Number of Records : 22</td>
    		</tr>
    		<td class=formdata align=right >
    		<input type="submit" name="submit1" value="submit1">
    </td></tr>
    		</table> 
     
    	<!-- PAGING END HERE -->
    	<input type="hidden" name="operation" value="Modify">
    <input type="hidden" name="cnt">
     
     </form>
     
     </BODY>
    </HTML>

  2. #2
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I'm too confused to answer this question.
    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?
    What is the "values" you're talking about and how it relates to "paging"? do you mean how are the parameters passed to servlets? What I'm really confused is that you already have paging working and not sure what you're asking about.

  3. #3
    SiteP0int Weazle hooknc's Avatar
    Join Date
    Dec 2004
    Location
    Socialist Republic of Boulder
    Posts
    937
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Don't cache any of your data between requests. That way you always get your database data and then place it into your request data.

    This also looks like a possible JavaScript issue.

    I didn't see your query, but in most databases there are ways of stating, run this query, but only return 10 values from starting point X.

    That should help you out a bit.
    baby steps... baby steps...

  4. #4
    SitePoint Member
    Join Date
    May 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by sg707 View Post
    I'm too confused to answer this question.


    What is the "values" you're talking about and how it relates to "paging"? do you mean how are the parameters passed to servlets? What I'm really confused is that you already have paging working and not sure what you're asking about.
    see user can modify some values in texboxes or else can add some new rows and clicked next button ;how to read those values?.i have pasted the code above in servlet to read those values using request.getParameterValues.Is it correct?

    the naming convention given in the form for textboxes and select box is correct or not?


    assume that i read the values in servlet and stored in requestList.then how to compare requestList and databaseList.if newly added rows r there in requestList then i need to add those values in databaseList.How to achieve this ?

  5. #5
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I see your situation. I'm assuming you're using javascript to insert/delete a row. I don't think getParameterValues will help you. There's a chance that "ContainerNumber" & "ContainerDescription" may not be in the same order. So I would not trust that logic. Of course, there are zillion options to make this happen.

    1) Since you're using JavaScript, you may consider using AJAX to add/delete/update the values to the server. You can trigger the AJAX by on/offFocus, onChange, and etc... at the field level.

    2) You can name the parameters in sequence. For example
    ContainerNumber1
    ContainerNumber2
    ContainerNumber3
    At least this way, you know which ContainerNumber matches with ContainerDescription.

    If it was up to me, I would lean on AJAX since you already have JavaScript to handle the tables.

    As far as displaying the values when the user presses back button, you need to save those data into session. G'luck!

  6. #6
    SitePoint Member
    Join Date
    May 2009
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for understood my problem.i posted this Q in several forums but couldn't get single answer.coming back to this Q you asked me to change the naming convention.i will do like that.

    i have another doubt if i delete some rows how can i store that id(for each row i should have unique id.am i correct?) in javascript and then i need to read those deleted rows id's in server side and delete these id's against databaseList.how yo do this functionality?

  7. #7
    SitePoint Wizard
    Join Date
    Apr 2007
    Posts
    1,401
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    I don't know how you exactly delete/add but as you said, you need to pass those id's to a servlet and remove the data that's stored in your session. I can't help you much further since I don't know how you save the data in your session. If you used HashMap then I would use the row id as a key, then it'll be easier to delete the item as needed.

  8. #8
    SitePoint Member ryan0124's Avatar
    Join Date
    Mar 2007
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    very hard to do
    06.org, Corrected.com, FlipHome.com, Skirt.info
    www.TakeDomain.com
    Best Youtube Video Downloader


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •