Using server-side.
I have a simple datatable where I check to see if some notes were entered in a field. If the field is not null, I want to display a warning icon that when clicked opens a modal with the content of that cell.
When I load the table the icons show correctly, ie. if there is data in the cell it shows the icon. However when I click the icon, it opens the modal correctly but only shows data from the first occurrence of something in the cell.
For example: 6 rows in the table. Rows 3 and 4 and 6 contain "admin_notes". When the table is rendered, rows 1 2 and 6 show correctly (ie no icon in that table cell), rows 3,4 and 5 show correctly (ie. show the button to denote admin_notes are present).
But when I click on the icon to open the modal for row 4, it shows the notes for row 3. Same for row 5. I've tried everything I can think of to fix. (disclaimer : not a JS expert at all).. Following are my column defs with the render.
columns: [
{ data: "requests.name" },
{ data: "requests.department" },
{ data: "requests.preferred_system" },
{
"className": 'accessories',
"orderable": true,
"searchable": false,
"data": null,
"defaultContent": ''
},
{
// Want to add a click to open modal here : Reference: https://datatables.net//forums/discussion/comment/22190/#Comment_22190
data: "requests.admin_notes",
defaultContent: '',
render: function ( data, type, row ) {
if ( data != null && data != '') {
var notesModal = '<center><button type="button" class="btn btn-danger btn-circle" data-toggle="modal" data-target="#admNotesModal">'
+'<i class="fa fa-warning"></i></button></center>'
+'<div class="modal fade" id="admNotesModal" tabindex="-1" role="dialog" aria-labelledby="Admin Notes" aria-hidden="true">'
+'<div class="modal-dialog">'
+'<div class="modal-content">'
+'<div class="modal-header">'
+'<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'
+'<h4 class="modal-title" id="myModalLabel">Admin Notes</h4>'
+'</div>'
+'<div class="modal-body">'
+data+'</div>';
return notesModal;
//return '<center><button type="button" class="btn btn-danger btn-circle" data-toggle="modal" data-target="#admNotesModal"><i class="fa fa-warning"></i></button></center>';
}
else {
return;
}
}
},
{
"className": 'details-control',
"orderable": false,
"searchable": false,
"data": null,
"defaultContent": ''
},
{
data: null,
sorting: false,
className: "text-center",
defaultContent: '<a href="" class="editor_edit"><button type="button" class="btn btn-primary btn-xs">Edit Application</button></a>'
}
],