How to activate pop up on button click in Data Table

Niketes

In the developing my app, as wrote in a previous thread, I used Data Table to show data in a table. After fixing my coding error, I have now the data showed perfectly, according to what I have stored in the Mysql db.

I precise that I’m using Spring Boot, MySql 5.7, Bootstrap, jQuery and Ajax.

Now I have another task: some data of the table must can be modified from user, if needed. To do this, is requested that there must be an extra column, let’s call this say “modify”, where there is a button called “Edit”; clicking this, a pop up must be opened and used from user to change fields and save these.
Also, is required that the pop up code is put into an external file, a jsp dedicated.

To get this, I was suggested to use Bootstrap modal, putting into my DataTable column thank to render command; then, i may add a script that thell to load and show the modal.

So, if the code where I use Data Table is this:

var DTevents = false;
$(document).ready(function() {  

    DTevents = $('#eventsdata').DataTable( 
            { 
                "serverSide": true,
                "ajax":{
                            url: "../getevents.json",
                            type: "post",
                            "data": function (d)
                            {
                                d = $.extend(d, {statusname :  $('#statusname').val()}, {typename :  $('#typename').val()}, {infoname :  $('#infoname').val()},
                                                {notename :  $('#notename').val()}, {idname :  $('#idname').val()}, {username :  $('#username').val()}, 
                                                {hostname :  $('#hostname').val()});
                            }
                            
                       },
                "columns":  [
                    { "data": "date" },
                    { "data": "type" },
                    { "data": "name" },
                    { "data": "user_name" },
                    { "data": "status" },
                    { "data": "closing_date" },
                    { "data": "info" },
                    { "data": "note" },
                    { "render": function ( data, type, full) {
                        
                        return '<a class="btn btn-info btn-md" data-toggle="modal" data-target="#myModal">' + 'Edit' + '</a>';
                    }
                  }
                ]
            } );

$("#eventsdata").on("click", ".btn.btn-info.btn-md", function () {
$("#eventsdata").load("editbutton");
            $("#myModal").modal('show');
        });
} );

I have 2 doubts:

1. Is this the right method to add a button for pop up into jquery Data Table?
2. When i define the .on("click"...) function, may i load the editbutton (putted in a external jsp) on the #eventsdata
   or on the page containing the data table?

kthorngren

The easiest way to provide editing capabilities is to use the Datatables Editor:
https://editor.datatables.net/

Its worth the small licensing price to have a complete and comprehensive editor that you just need to install and configure.

Here is an example Editor with inline controls:
https://editor.datatables.net/examples/simple/inTableControls.html

Kevin

Rob Brun

Hi Niketes, the way I would approach this is to use a the DataTables buttons extension and the DataTables Select Extension. I would create a custom Button and put a Select box in the First Column of the Table. Then you would be able to use the API to access data from the Selected Record on button press, as well as use that Data to put in a boot strap Modal for custom editing.

The DataTable editor is pretty sweet to, that is what I use.