Prevent multiple radio button selections in paginated jquery Datatables

问题

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

回答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>
<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

回答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.

来源：https://stackoverflow.com/questions/21778443/prevent-multiple-radio-button-selections-in-paginated-jquery-datatables

标签

jquery

html

jquery-datatables