I am trying to implement maintaining checkbox state across multiple pages in pagination.pagination is working fine.i havenot written that code here.
I have written below sample code maintaining checkbox state across multiple pages.;when user clicks checkboxes it calls handleCheckbox funtion and the checkbox id and value will be stored in the DataModel object and will be assigned to Array.
I am facing one problem i.e while user clicks second or different page numbers every time this page will be loaded and because of that userSelectedObjectsList array will be re intialized and whatever values will stored in the first page those values will be lost while coming to different pages because of re intialization of array?how to mitigate this problem?
<script>
var uniqueIdentifier = "checkBoxId";
var userSelectedObjectsList = new Array();
function handleCheckbox(obj)
{
if(obj.checked)
{
dataModel = new DataModel(obj.id, obj.value);
userSelectedObjectsList[userSelectedObjectsList.length] = dataModel;
}
else
{
for(var i=0;i<userSelectedObjectsList.length;i++)
{
dataModel = userSelectedObjectsList[i];
if(dataModel!=null)
{
if(eval("dataModel."+"houseCheckValue")==obj.value)
{
userSelectedObjectsList[i] = null;
dataModel = null;
break;
}
}
}
}
}
function DataModel(checkBoxId, houseCheckValue)
{
this.checkBoxId = eval(uniqueIdentifier);//checkBoxId;
this.houseCheckValue = houseCheckValue;//checkboxValue
}
</script>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
<table id="results">
<tr>
<th>#</th>
<th>field</th>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBoxId1" value="1" onclick="handleCheckbox(this)"></td>
<td>1</td>
<td><input type="text" name="field-name" value="rec1"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox2" value="2" onclick="handleCheckbox(this)"></td>
<td>2</td>
<td><input type="text" name="field-name" value="rec2"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox3" value="3" onclick="handleCheckbox(this)"></td>
<td>3</td>
<td><input type="text" name="field-name" value="rec3"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox4" value="4" onclick="handleCheckbox(this)"></td>
<td>4</td>
<td><input type="text" name="field-name" value="rec4"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox5" value="5" onclick="handleCheckbox(this)"></td>
<td>5</td>
<td><input type="text" name="field-name" value="rec5"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox6" value="6" onclick="handleCheckbox(this)"></td>
<td>6</td>
<td><input type="text" name="field-name" value="rec6"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox7" value="7" onclick="handleCheckbox(this)"></td>
<td>7</td>
<td><input type="text" name="field-name" value="rec7"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox8" value="8" onclick="handleCheckbox(this)"></td>
<td>8</td>
<td><input type="text" name="field-name" value="rec8"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox9" value="9" onclick="handleCheckbox(this)"></td>
<td>9</td>
<td><input type="text" name="field-name" value="rec9"></td>
</tr>
<tr>
<td><input type="checkbox" name="checkBoxId" id="checkBox10" value="10" onclick="handleCheckbox(this)"></td>
<td>10</td>
<td><input type="text" name="field-name" value="rec10"></td>
</tr>
</table>
<div id="pageNavPosition"></div>
<div><input type="submit" onclick="alert('Hey, this is just a sample!'); return false;" /> <input type="reset" /></div>
</form>
</HTML>