jQuery Datatable的所有记录中的Struts2复选框

Question

I am trying to implement the checkbox as a column in a jquery datatable. When I select the records then those alone should be actioned in the respective Action class. I have created a hidden variable and am assigning the value in jQuery likewise:

HTML:

<s:iterator value="warehouseBean.pickReqList" status="matStat">
    <s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].grade"></s:hidden>
    <s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].quantity"></s:hidden>
    <s:hidden name="warehouseBean.pickReqList[%{#matStat.index}].action"></s:hidden>
</s:iterator>

<tbody><s:iterator value="warehouseBean.pickReqList" status="matStat">
    <tr>
         <td><s:property value="grade" /></td>
         <td><s:property value="quantity" /></td>
         <td><s:select name="warehouseBean.pickReqList[%{#matStat.index}].pickQuantity" list="pickQuantity"></s:select></td>
         <td><s:checkbox name="chkboxname" cssClass="checkbox pickIndivCheck"></s:checkbox></td>
    </tr>
    </s:iterator>
</tbody>

Whenever the checkbox is clicked, then the hidden variable is assigned with the value.

jQuery:

$('.pickIndivCheck').click(function(e){
   var index=$(this).closest('tr').index();
   $('#warehousePick_warehouseBean_pickReqList_'+index+'__action').val(e.target.checked); });

The above code works perfectly if I do not sort or navigate to different page of the table. If I select the check box on the first page of the datatable, the checked property is assigned to the action variable and the same is reflected in Action class.

If I sort or paginate then its not working. Upon troubleshooting, I found out that the jQuery code is getting the index of the clicked checkbox and assigns the value. For ex, if there are 20 elements in the object, loading in two different pages of the datatable. The hidden variables are written likewise:

<input type="hidden" name="warehouseBean.pickReqList[0].grade" value="BR000-R" id="warehousePick_warehouseBean_pickReqList_0__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[0].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_0__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[0].action" value="false" id="warehousePick_warehouseBean_pickReqList_0__action"/>

<input type="hidden" name="warehouseBean.pickReqList[1].grade" value="BR001-R" id="warehousePick_warehouseBean_pickReqList_1__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[1].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_1__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[1].action" value="false" id="warehousePick_warehouseBean_pickReqList_1__action"/>

<input type="hidden" name="warehouseBean.pickReqList[2].grade" value="BR002-R" id="warehousePick_warehouseBean_pickReqList_2__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[2].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_2__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[2].action" value="false" id="warehousePick_warehouseBean_pickReqList_2__action"/> .........

<input type="hidden" name="warehouseBean.pickReqList[18].grade" value="BR0018-R" id="warehousePick_warehouseBean_pickReqList_18__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[18].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_18__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[18].action" value="false" id="warehousePick_warehouseBean_pickReqList_18__action"/>

<input type="hidden" name="warehouseBean.pickReqList[19].grade" value="BR0019-R" id="warehousePick_warehouseBean_pickReqList_19__grade"/>
<input type="hidden" name="warehouseBean.pickReqList[19].quantity" value="1" id="warehousePick_warehouseBean_pickReqList_19__quantity"/>
<input type="hidden" name="warehouseBean.pickReqList[19].action" value="false" id="warehousePick_warehouseBean_pickReqList_19__action"/>

This is how it appears on the datatable as well. If I sort the table, then the last records appear in the first page of table. If I select the second record, the jQuery method gets the current index (which is 1) is assigned to the hidden variable

warehousePick_warehouseBean_pickReqList_1__action

whereas the actual variable should be

warehousePick_warehouseBean_pickReqList_18__action

The index of the datatable record is not same as the index of the hidden object. Can you please let me know how to assign the values to the checkbox of rows in different table?

Answer 1

I created a dummy variable temp and then changed the HTML likewise

<tr>
     <td><s:property value="grade" /></td>
     <td><s:property value="quantity" /></td>
     <td><s:select name="warehouseBean.pickReqList[%{#matStat.index}].pickQuantity" list="pickQuantity"></s:select></td>
     <td><s:checkbox name="warehouseBean.pickReqList[%{#matStat.index}].temp" cssClass="checkbox pickIndivCheck"></s:checkbox></td>
</tr>

Changed jQuery to get the id of the check box (which is clicked), extracted the index from the ID and then assigned to the respective hidden variable after creating the variable using the index, likewise:

$('.pickIndivCheck').click(function(e){
    var clId=this.id;
    var temp=clId.substring(40);
    var n=temp.lastIndexOf('_');
    var index=temp.substring(0,n-1);
    $('#warehousePick_warehouseBean_pickReqList_'+index+'__action').val(e.target.checked);   });