How do you retain a checked radio button after table draw?

arnoElose

My table has radio buttons on the first column, checking a radio button then going to another page of the datatable doesnt retain the checked radio button when i go back to it.

upon hours of debugging, i have learned that the radio buttons are unchecked upon the draw whenever i change page.

here's my code for the datatable:

[code]
//i only showed the render of my radio button here as that is the issue
var columns = [
{
"render": function (data, type, full, meta) {

                if (type === 'display') {
                    data = '<input type="radio" class="dtRadioBtn" name="id" value="' + data + '">';
                }

                return data;
            }
        }
    ];

table = $('#example').DataTable({
"data": data,
"columns": columns,
"ordering": false,
"lengthMenu": [ [3, 5, 10, -1], [3, 5, 10, "All"] ],
scrollX: "100%",
scrollCollapse: true,
paging: true,
"fnDrawCallback": function () {
$('.dtRadioBtn').click(function () {
//TODO
}
},
fixedColumns: {
leftColumns: 3,
heightMatch: 'none'
},
});
[/code]

i tried adding this on the click function, it doesnt work:

var radioBtnDOM = $(table.column(0).nodes().to$()).find('.dtRadioBtn');
$(radioBtnDOM[rowIndexOfPreviousChecked]).prop('checked', false);

can anyone help?