Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82036

Render shows data for first cell encountered on all other cells

$
0
0

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">&times;</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>'
            }
        ],


Viewing all articles
Browse latest Browse all 82036

Trending Articles