Menu
I am using Jquery datatables with pagination in Html. The radio button working fine in single page, but it is unable to prevent the multiple selections of radio button when it somes to multiple pages, i.e if i select one radio button in page 1 and another radio button in Page 2, then both are being in selected mode only. Radio button is known for single selection, but here I am getting different behaviour
445
asked Oct 22 '25 07:10
I had same problem like you. I found one solution for this problem. please find the code details in bellow full example.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<style>
table.dataTable tbody>tr.selected,
table.dataTable tbody>tr>.selected {
background-color: #A2D3F6;
}
</style>
</head>
<body>
<table id="example">
<thead>
<tr>
<th>Location </th>
<th>Base Location </th>
</tr>
</thead>
<tbody>
<tr><td>Pune</td><td><input type="radio" name="baseLocation" value="Pune"/></td></tr>
<tr><td>Mumbai</td><td><input type="radio" name="baseLocation" value="Mumbai"/></td></tr>
<tr><td>Dubai</td><td><input type="radio" name="baseLocation" value="Dubai"/></td></tr>
<tr><td>Nashik</td><td><input type="radio" name="baseLocation" value="Nashik"/></td></tr>
<tr><td>Delhi</td><td><input type="radio" name="baseLocation" value="Delhi"/></td></tr>
<tr><td>Sangli</td><td><input type="radio" name="baseLocation" value="Sangli"/></td></tr>
<tr><td>Chennai</td><td><input type="radio" name="baseLocation" value="Chennai"/></td></tr>
<tr><td>Panji</td><td><input type="radio" name="baseLocation" value="Panji"/></td></tr>
<tr><td>Thane</td><td><input type="radio" name="baseLocation"value="Thane" /></td></tr>
<tr><td>Patna</td><td><input type="radio" name="baseLocation"value="Patna" /></td></tr>
<tr><td>Bhopal</td><td><input type="radio" name="baseLocation " value="Bhopal"/></td></tr>
<tr><td>ABC</td><td><input type="radio" name="baseLocation" value="ABC"/></td></tr>
<tr><td>XYX</td><td><input type="radio" name="baseLocation" value="XYX"/></td></tr>
<tr><td>PQR</td><td><input type="radio" name="baseLocation"/ value="PQR"></td></tr>
<tr><td>Riaydh</td><td><input type="radio" name="baseLocation" value="Riaydh"/></td></tr>
<tr><td>Jeddah</td><td><input type="radio" name="baseLocation" value="Jeddah"/></td></tr>
</tbody>
</table>
</body>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type="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);
});
function currentSelectedRadio()
{
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
194
answered Oct 23 '25 20:10
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With