title: How to add edit and delete buttons in datatable
body: <p>I am fairly new to data tables, I am trying to add edit and delete buttons to my data table on each row. Once clicked, the edit and delete buttons should execute some functions I created. I have tried reading documentations and other StackOverflow questions but I don't seem to get them. Here is my code:</p>
  
  <pre><code> &lt;table class="table table-striped table-bordered" style="width:fit-content; " id="mydatatable"&gt;
     &lt;thead&gt;
       &lt;tr&gt;
         &lt;th data-field="Document_id" scope="col"&gt;Document id&lt;/th&gt;
         &lt;th scope="col"&gt;title&lt;/th&gt;
         &lt;th scope="col"&gt;details&lt;/th&gt;
         &lt;th scope="col"&gt;timestamp&lt;/th&gt;
         &lt;th scope="col"&gt;name&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/thead&gt;
     &lt;tfoot&gt;
       &lt;tr&gt;
         &lt;th data-field="Document_id" scope="col"&gt;Document id&lt;/th&gt;
         &lt;th scope="col"&gt;title&lt;/th&gt;
         &lt;th scope="col"&gt;details&lt;/th&gt;
         &lt;th scope="col"&gt;timestamp&lt;/th&gt;
         &lt;th scope="col"&gt;name&lt;/th&gt;
       &lt;/tr&gt;
     &lt;/tfoot&gt;
   &lt;/table&gt;
  
  </code></pre>
  
  <pre><code>db.collection("Emergency_Feeds").orderBy("timestamp", "desc").onSnapshot(function(querySnapshot) {
  
    querySnapshot.docChanges().forEach(function(change) {
  
      console.log('documents retrieved successfully');
      console.log(`is here: ${change.doc.id} =&gt; ${change.doc.data().name}`);
  
      var documentId = change.doc.id;
      var username = change.doc.data().name;
      var emTitle = change.doc.data().title;
      var emDets = change.doc.data().details;
      var emTimeDate = change.doc.data().timestamp.toDate();
  
      if (change.type === "added") {
        tableData.push(
          [
            documentId,
            emTitle,
            emDets,
            emTimeDate,
            username
          ]);
      }
  
      if (change.type === "modified") {
        //..... 
        //Here update the table element
        // Note that the DocumentChange contains the old and new index
        tableData.push(
          [
            documentId,
            emTitle,
            emDets,
            emTimeDate,
            username
          ]);
      }
  
      if (change.type === "removed") {
        //..... 
        //Here remove the table element
        tableData.pop(
          [
            documentId,
            emTitle,
            emDets,
            emTimeDate,
            username
          ]);
      }
    });
  
    $('#mydatatable').DataTable({
      retrieve: true,
      data: tableData,
      pagingType: 'full_numbers',
      lengthMenu: [
        [5, 10, 25, 50, -1],
        [5, 10, 25, 50, "All"]
      ],
  
  
    });
    $('#mydatatable tfoot th').each(function() {
  
      var title = $(this).text();
      $(this).html('&lt;input type="text" placeholder="Search ' + title + '" /&gt;')
    });
    var datTable = $('#mydatatable').DataTable();
    datTable.columns().every(function() {
  
      var that = this;
      $('input', this.footer()).on('keyup change', function() {
  
        if (that.search() !== this.value) {
  
          that.search(this.value).draw();
        }
      });
    });
  });  
  </code></pre>