Add button column

Add button column

le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

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

Replies

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

    html:

    Project Name Client Name City State Status Units Sqft
  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin
    {
      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

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

    Thank you so much

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0
    {
            //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>';
    
    
          } 
        }
    
  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

    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?

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

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

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

    The modal starts on line 185 of projects_table html.

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

    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

  • le0n0920le0n0920 Posts: 15Questions: 1Answers: 0

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

  • allanallan Posts: 61,446Questions: 1Answers: 10,054 Site admin

    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

This discussion has been closed.