Add button column

le0n0920

Allen,

I would like to add aq button in a column next to data from ajax. how can I accomplcih this. current code is.
code:

$('#projScopeTabl').DataTable( {

     responsive: true,
ajax: {
    url: 'phpScripts/getProjScopeTableData.php',
    dataSrc: ''
},
columns: [ 
   { data: 'proj_name' },
    { data: 'proj_client_name' },
    { data: 'proj_city' },
    { data: 'proj_state_abr' },
    { data: 'proj_status' },
    { data: 'proj_units' },
{ data: 'proj_sqft'}
//would like to add repeating button here   
        ]

});

html:

Project Name	Client Name	City	State	Status	Units	Sqft

le0n0920

html:

Project Name	Client Name	City	State	Status	Units	Sqft

allan

{
  data: null,
  render: function ( data, type, row ) {
    return '<button>...</button>';
  }
}

You may also have to modify the HTML before you create the DataTable by inserting the extra column into the HTML table (assuming that it is already there):

$('#projScopeTabl thead tr').append('<th/>');

Allan

le0n0920

Thank you so much

le0n0920

{
        //adds td row for button
      data: null,
      render: function ( data, type, row ) {
        return '<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">Launch demo modal</button><!-- Modal --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="test2">' + data.proj_name + '</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">...</div><div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div></div>';


      } 
    }

le0n0920

In the above code I have added a modal to pop up upon click. It should populate with the current JSON objects data, but only shows the first JSON oblect data. How can I fix this mate?

allan

It sounds like it might be a closure issue. Can you give me a link to the page showing the issue so I can help to debug it please?

Allan

le0n0920

Mate I have sent you a private message with access to my server and the need files. Should be ready in about an hour.

le0n0920

The modal starts on line 185 of projects_table html.

le0n0920

This is actually what I want with the ajax data, but have no clue whats going on or how to add it
https://datatables.net/extensions/responsive/examples/display-types/bootstrap4-modal

le0n0920

www.mitoinsulation.online. I have added it to the web for your view

allan

Got it - thanks for that!

The problem is that you have invalid HTML. Specifically there are multiple div element which have the same id attribute. You'd need a unique id for each one, or to have a single modal outside of the table which is updated based on the content of the row (which is probably how I would suggest you do it) and then trigger that single modal to show.

Allan