I would like to add a button that will populate a field in a modal popup form

cemfundog

I have a datatable set up that is pulling info from a mysql database. (data created from a wordpress plugin called ACF). The datatable shows several rows of data and one of the cells in each row has an email address. I have the select feature 'on' in the datatable and I can select the rows I want as well as export, all working fine.

What i am trying to do is add another button next to the export options button that will open a bootstrap modal and populate a field with all the email addresses from the selected rows. I know that this is probably a bigger question than i realize but i thought I would start here and see if I can get pointed in the right direction.

Any help will be greatly appreciated. Thank you all for looking.

(sorry, my site is currently on a localhost only so I can not show you)

Rob Brun

Hi cemfundog, I have done this in a couple of the applications that I have created. Usually to call a drill down table base on a selected row from a parent table. You have to create a custom button and you can assign what ever functionality you want to it. So add something like this to your buttons array. You would have to implement the plural version of this if you are using multi select.

{
         text: 'Export Emails Addresses',
         action: function (e, dt, node, config) {

               //get Selected Row information
                 var emailAddress = dt.row({ selected: true }).data().EmailAddresses;
               //some other code
                  $("#emailModal").modal("show");
},
           enabled: false
}

Then in your Select events manage the enabling and disabling of your custom button based on whether rows are selected or not.

              accountsDataTable.on('select.dt', function (e, dt, type, indexes) {
                  var selectedRows = dt.rows({ selected: true }).count();
                  dt.button(4).enable(selectedRows === 1);
              });

              accountsDataTable.on('deselect.dt', function (e, dt, type, indexes) {
                  dt.button(4).disable();
              });

I hope this helps you

Shay

cemfundog

Wow, i just noticed your reply. Thank you very much for this. I will try it out and report back.

cemfundog

Ok, thank you so much for this Rob. I have a problem though. I have added the button no problem but I must be adding the select events incorrectly. Here is what I have done:

   $(document).ready(function() {
       var dataTable = $('#post-type-table').DataTable( {
                    dom: 'CB<"clear">lfrt<"bottom"ip>',
   accountsDataTable.on('select.dt', function (e, dt, type, indexes) {
    var selectedRows = dt.rows({ selected: true }).count();
    dt.button(4).enable(selectedRows === 1);
   });
   accountsDataTable.on('deselect.dt', function (e, dt, type, indexes) {
    dt.button(4).disable();
   }); 
      colReorder: true,
      stateSave: true,

The table code continues from there. Can you see what I am doing wrong. Thanks again for your help.

allan

That doesn't look like valid Javascript. Does it not show an error in your browser's console stating that there is a syntax error?

You need to move your on method calls to after the DataTable initialisation rather than just sticking it in the middle of the init object.

You also refer to accountsDataTable as a variable, but dataTable is the variable name you are creating on line 2.

Have a look at your browser's console for further details.

Allan