data table separated different button

kepsnius

hi, i got data table, in data table row are two button, i wanna separated them, because one for delete, one for edit. I use js, to add what button. Picture bellow

Now then i press edit or delete i got the same. my code js code

var table = $('#calEvents').DataTable( {
        "processing": true,
        "serverSide": false,
        "order": [[ 3, "asc" ]],
        "ajax": "/api/v1/calendar/get",
        'columnDefs': [
            {
               targets: 2, render: function(data1){ return moment(data1).format('dddd')},
            },
            {
               targets: -1, defaultContent: '<button class="btn btn-secondary" data-dismiss="modal" id="Edit" type="button">Edit</button>'
                 + '&nbsp <button class="btn btn-danger" id="Delete" data-dismiss="modal" type="button">Delete</button>'
            },
            { targets: 3, render: function(data2){ return moment(data2).format('YYYY-MM-DD')}},
        ]
    } );
   $('#calEvents').on( 'click', 'button', function () {
   var data = table.row( $(this).parents('tr') ).data();
   var row= this.parentNode.parentNode;
   var confirmalert = confirm("Are you sure?");
   if (confirmalert == true) {
      document.getElementById("calEvents").deleteRow(row.rowIndex);
          }else{
        alert('Invalid ID.');
          }
 });

Now i got only delete function, because i cant test if they working like one.
i try do something like
$('#calEvents .deleteButton').click(function (){ <button class="btn btn-danger" id="Delete" data-dismiss="modal" class="deleteButton" type="button">Delete</button>'
but my button not working then.

kthorngren

Maybe try using the button name attribute and a selector using the name s shown in this Stack Overflow thread.

Kevin

kepsnius

I try this one, but still nothing
$("button[name='delete']").click(function()

 <button name="delete" class="btn btn-danger" data-dismiss="modal" type="button">Delete</button>'

kthorngren

$("button[name='delete']").click(function()

Isn't going to work. You need to use delegated events like you had before and as shown in this example.

Try `$('#calEvents').on( 'click', 'button[name="delete"]', function () {``

If this doesn't work then please build an example with what you are trying so we can better help you.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

kepsnius

Its working, thank you very much

kepsnius

In my case maybe can you give some tips how to star edit function? i like to do like this https://editor.datatables.net/examples/simple/inTableControls.html
my json data looks like this:

{
  "data": [
    [
      16, 
      "ESP CALENDAR", 
      "Thu, 23 Jul 2020 00:00:00 GMT", 
      "Thu, 23 Jul 2020 00:00:00 GMT", 
      "ENG SM", 
      "sadsad", 
      "sadasda"
    ], 
    [
      17, 
      "GER CALENDAR", 
      "Wed, 29 Jul 2020 00:00:00 GMT", 
      "Wed, 29 Jul 2020 00:00:00 GMT", 
      "SVT LN", 
      "asdddddddd", 
      "MMMMMMMMMM"
    ]
  ]
}

and my html code looks like this (table)

 <div class="row-90">
        <table class="table display" id="calEvents">
            <thead>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">TICKER</th>
                    <th scope="col">EVENT</th>
                    <th scope="col">READX</th>
                    <th scope="col">ACTION</th>
               
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th scope="col">ID</th>
                    <th scope="col">GROUP</th>
                    <th scope="col">WEEKDAY</th>
                    <th scope="col">DATE</th>
                    <th scope="col">TICKER</th>
                    <th scope="col">EVENT</th>
                    <th scope="col">READX</th>
                    <th scope="col">ACTION</th>
        
                   
                </tr>
            </tfoot>
        </table>
    </div>

kthorngren

If you don't want to use the Editor then you will need to create your won forms and submit them using ajax. If you don't know how then you will need to find a tutorial, like this. Once you ge the data submitted via ajax then your server script will need to update the row and provide an ajax response so you know at the client the row was updated. One option is to have the server respond with the updated row data and you can directly update the row in the table. Or you can use ajax.reload() to refresh the table from the server DB.

If you have Datatables related questions let us know. If you have questions around the HTML forms, then you are better served by search Stack Overflow as these are more generic not Datatables specific questions.

Kevin