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;
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 >
<a id='nextLink' title='ALT+->' href="javascript:onClick=FetchAir('null',2)">Next>></a>
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>