datatables reorder issue.
datatables reorder issue messing up radios that are rendered.
by matthewr123
HTML
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/rowreorder/1.2.5/css/rowReorder.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/rowreorder/1.2.5/js/dataTables.rowReorder.min.js"></script>
<table id="example" class="display" style="width:100%"></table>
JavaScript
$(document).ready(function() {
var dataSet = {"d":[
{"QUESTION":"Question 1",
"REQUIREDANSWER":"Y",
"QUESTIONORDER":1,
"GENERAL_Q":"Y"},
{"QUESTION":"question 2",
"REQUIREDANSWER":"Y",
"QUESTIONORDER":2,
"GENERAL_Q":"Y"},
{"QUESTION":"Question 3",
"REQUIREDANSWER":"Y",
"QUESTIONORDER":3,
"GENERAL_Q":"Y"},
{"QUESTION":"Question 4",
"REQUIREDANSWER":"Y",
"QUESTIONORDER":4,
"GENERAL_Q":"Y"},
]};
var disabled_var = '';
var radio_GENERAL_Q = function (data, type, row, meta) {
var is_checked_YES = data === "Y" ? "checked" : "";
var is_checked_NO = data === "N" ? "checked" : "";
var yes_color = '';
var no_color = '';
if (row.GENERAL_Q === 'Y') {
yes_color = 'green';
no_color = 'red';
}
else {
yes_color = 'red';
no_color = 'green';
}
return '<input id="q_edit_gen_q_radio_Y_' + meta.row + '" type="radio" name="q_edit_gen_q_radio_' + meta.row + '" value="Y" ' + is_checked_YES + ' ' + disabled_var + '>' +
'<label style="color:' + yes_color + ';padding-left:4px;" for="q_edit_gen_q_radio_Y_' + meta.row + '">Yes</label>' +
'<br/>' + //' ' +
'<input id="q_edit_gen_q_radio_N_' + meta.row + '" type="radio" name="q_edit_gen_q_radio_' + meta.row + '" value="N" ' + is_checked_NO + ' ' + disabled_var + '>' +
'<label style="color:' + no_color + ';padding-left:4px;" for="q_edit_gen_q_radio_N_' + meta.row + '">No</label>';
}
$('#example').DataTable({
data: dataSet.d,
"rowReorder": {
dataSrc: 'QUESTIONORDER'
},
"columns" : [
{ "title": "Seq", "data" : "QUESTIONORDER" },
{ "title": "QUESTION", "data" : "QUESTION" },
{ "title": "General Q.", "data": "GENERAL_Q",...