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;" />&nbsp;<input type="reset" /></div>
    </form>
    
</HTML>

Instead of form submitting the page and reloading, perform an ajax call to only reload the part of the page that contains the form. This way you maintain your state and don't lose the array.

how to perform an ajax call only reload the part of the page that contains the form?
I dont much about ajax?can you show some sample code

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.