How to pass DataTable data to a Bootstrap modal

Question

I have a jQuery Data Table with this variable:

 "columns":  [
                    { "data": "id" },
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function () {
                            return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\""+data.id+"\" data-target='#myModal'> Edit </button>";
                    }
                  }
                ]

That shows the results of the query perfectly. As you can see, at the end oh the table appear a column with a edit button that must allow a user to modify note and status; this modified data must be send to a Spring controller with the id of the data to modify.

My problem is not how to send to controller; i solved this problem thanks to an user here on stack.

My problem is: if I want that { "data": "id" } will be used, in modal, to set the data-id on the button that trigger the modal, what syntax must I use? The actual syntax make me an error that tells "data is not defined" when I load the app. Seems that if I use the actual value, data-id=\""+data.id+"\", it don't recognize the data. notation to recall the data of data table columns.

EDIT: the markpsmith answer solve the problem of data not defined but I have still problems. His solution introduce another issue: now, when I submit form data, i got un "undefined" value on id. Analyzing the element i can note that it's undefined before I submit data form; immediately after the page is load, inspecting the button the value is undefined.

I've tried other solution found on web, but the problem is always the same: all the data and combination that I put on data-id are not recognized and this value is set to undefined.

Answer 1

 var table = $('#dTable').DataTable({
        processing: true,
        serverSide: true,
        ajax:
        {
            url: '{{ route("settings.getList") }}',
            type: 'GET',
            dataType: "JSON",
            error: function (reason) {
                return true;
            }
        },
        columns: [
            { data: 'serial'},
            { data: 'name' },
            { data: 'value' },
            { data: 'actions', render:function (data, type, full, meta) {
                                return `<a class="success p-0 mr-2" title="Edit" data-id="${full.id}" data-name="${full.name}" data-value="${full.value}" data-toggle="modal" data-keyboard="false" data-target="#editSetting">
                                            <i class="ft-edit font-medium-3"></i>
                                        </a>`;  }
            }
        ],
        columnDefs: [
            { width: "10%", "targets": [-1, 0] },
            { orderable: false, targets: [-1] }
        ],
    });

    $('#editSetting').on('show.bs.modal',function(event){
        const button = $(event.relatedTarget);
        const name = button.data('name');
        const value = button.data('value');
        const valueOriginal = button.data();
        
        var type = jQuery.type(value);
        if(type == 'number'){
            $("#value").html('<input type="number" class="form-control border-primary"  name="value" value='+value+' novalidate required>');
        } else if (type == 'string'){
            $("#value").html('<textarea class="form-control border-primary"  name="value" novalidate required>'+value+'</textarea>');
        } 
        const id = button.data('id');
        const modal = $(this);
        $(this).find('.modal-body #name').text(name);
        $(this).find('.modal-body #value').val(value);
        $(this).find('.modal-body #id').val(id);
    });

<div class="modal fade text-left" id="editSetting" tabindex="-1" role="dialog" aria-labelledby="myModalLabel3" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header bg-success">
                <h3 class="modal-title" id="myModalLabel3">Edit Setting</h3>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form action="POST" name="updateSetting" id="updateSetting">
                    
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label class="text-bold-700" for="name">Name</label>
                                <p id="name"></p>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12" >
                            <div class="form-group">
                                <label for="value">Value</label>
                                <div id="value">
                                    
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="form-actions center pb-0">
                        <input type="hidden" id="id" name="id">
                        <button type="reset" data-dismiss="modal" class="btn btn-raised btn-danger mr-1">
                            <i class="icon-trash"></i> Cancel
                        </button>
                        <button type="submit" class="btn btn-raised btn-success">
                            <i class="icon-note"></i> Update
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Answer 2

You can pass data from the row into data attributes on the modal trigger button...

 "columns": [
    ...
    "render": function(data, type, row) {return '<button class="btn btn-primary" data-toggle="modal" data-id="'+row.id+'" data-fieldname="'+row.fieldname+'" data-target="#myModal">'+data+'</button>'} }
 ]

and then use jQuery and Bootstrap modal show event to populate the modal content from the data attribute of the button...

$("#myModal").on('show.bs.modal', function (e) {
    var triggerLink = $(e.relatedTarget);
    var id = triggerLink.data("id");
    var fieldname = triggerLink.data("fieldname");
    $(this).find(".modal-body").html("<h5>id: "+id+"</h5>");
});

See the "Date" column in this working demo: https://www.codeply.com/go/YV9eFnJXst

Answer 3

You're using render as a function type but not supplying any arguments. If you look at the docs you will see that render() takes 4 parameters, none of which are optional.

To make your code work you need to change it to this:

"render": function (data, type, full, meta) {
     return "<button type='button' class='btn btn-info btn-md' data-toggle='modal' data-id=\"" + full[0] + "\" data-target='#myModal'> Edit </button>";
}

The full parameter is the complete row data, and as you're using the first column(id), you need to refer to this by zero-based index.