Prevent Multiple Radio Button Selections In Paginated Jquery Datatables
Solution 1:
I had same problem like you. I found one solution for this problem. please find the code details in bellow full example.
<html><head><linkrel="stylesheet"type="text/css"href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"><style>table.dataTabletbody>tr.selected,
table.dataTabletbody>tr>.selected {
background-color: #A2D3F6;
}
</style></head><body><tableid="example"><thead><tr><th>Location </th><th>Base Location </th></tr></thead><tbody><tr><td>Pune</td><td><inputtype="radio"name="baseLocation"value="Pune"/></td></tr><tr><td>Mumbai</td><td><inputtype="radio"name="baseLocation"value="Mumbai"/></td></tr><tr><td>Dubai</td><td><inputtype="radio"name="baseLocation"value="Dubai"/></td></tr><tr><td>Nashik</td><td><inputtype="radio"name="baseLocation"value="Nashik"/></td></tr><tr><td>Delhi</td><td><inputtype="radio"name="baseLocation"value="Delhi"/></td></tr><tr><td>Sangli</td><td><inputtype="radio"name="baseLocation"value="Sangli"/></td></tr><tr><td>Chennai</td><td><inputtype="radio"name="baseLocation"value="Chennai"/></td></tr><tr><td>Panji</td><td><inputtype="radio"name="baseLocation"value="Panji"/></td></tr><tr><td>Thane</td><td><inputtype="radio"name="baseLocation"value="Thane" /></td></tr><tr><td>Patna</td><td><inputtype="radio"name="baseLocation"value="Patna" /></td></tr><tr><td>Bhopal</td><td><inputtype="radio"name="baseLocation "value="Bhopal"/></td></tr><tr><td>ABC</td><td><inputtype="radio"name="baseLocation"value="ABC"/></td></tr><tr><td>XYX</td><td><inputtype="radio"name="baseLocation"value="XYX"/></td></tr><tr><td>PQR</td><td><inputtype="radio"name="baseLocation"/ value="PQR"></td></tr><tr><td>Riaydh</td><td><inputtype="radio"name="baseLocation"value="Riaydh"/></td></tr><tr><td>Jeddah</td><td><inputtype="radio"name="baseLocation"value="Jeddah"/></td></tr></tbody></table></body><scripttype="text/javascript"charset="utf8"src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script><scripttype="text/javascript"charset="utf8"src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script><scripttype="text/javascript">var lastSelectedRadio = '';
var table='';
$(document).ready(function() {
table= $('#example').DataTable( {
responsive: true,
pageLength: 5,
lengthChange: true,
bSort: false,
"sPaginationType": "full_numbers",
lengthMenu: [5, 10, 15],
"fnDrawCallback": function( oSettings ) {
lastSelectedRadio=currentSelectedRadio();
},
} );
} );
$("#example input[type='radio']").on("click",function(){
table.$("input[type='radio'][value='" + lastSelectedRadio +"']").prop('checked', false);
lastSelectedRadio = ($(this).val() ? $(this).val() :lastSelectedRadio)
table.$("input[type='radio'][value='" + lastSelectedRadio + "']").prop('checked', true);
});
functioncurrentSelectedRadio()
{
var currentSelectedValue=lastSelectedRadio;
$("#example input[type=radio]:checked").each(function() {
currentSelectedValue=($(this).val() ? $(this).val() :currentSelectedValue);
});
return currentSelectedValue;
}
</script></html>Explanation: Here in above code you can see, I wrote one custom function currentSelectedRadio() and called it from fnDrawCallback because fnDrawCallback function will call every time while changing the page. same time we are taking backup of previously selected button value into global var 'lastSelectedRadio'. On click event of radio button.I am unchecking value of previously selected button from global variable lastSelectedRadio and adding checked attribute to current radio button.
But keep in mind element on another page of datatable will not be available in DOM. Datatable only adds current page elements to DOM. Then how we can get all the elements available in datatable but not available in DOM? Yes, We can get all the elements, for that We have to iterate over datatable using table.$("") syntax then only will able to uncheck radio button on another page which was selected before selecting current button
Solution 2:
I had the same problem and I found a post here: http://datatables.net/forums/discussion/20484/how-to-avoid-multiple-radio-buttons-selection-when-paginating-a-table
"drawCallback" function will be called every time when switching pages. So it is possible to compare the value of button that is currently checked on the page to the value of button that was checked on the other page. (You need to save the last value of button checked.) If they don't match then just clear the check property of the button on current page.
Hope it helps.
Post a Comment for "Prevent Multiple Radio Button Selections In Paginated Jquery Datatables"