How to Add Button on Each Row in Datatable

How do I add button on each row in datatable?

Basically your code is okay, thats the right way to do this. Anyhow, there are some misunderstandings:

1. fetchUserData.cfm does not contain key/value pairs. So it doesn't make sense to address keys in mData. Just use mData[index]

2. dataTables expects some more info from your serverside. At least you should tell datatables how many items in total are on your serverside and how many are filtered.
   I just hardcoded this info to your data. You should get the right values from counts in your server sided script.

   {
    "iTotalRecords":"6",
    "iTotalDisplayRecords":"6",
     "aaData": [
   [
       "1",
       "sameek",
       "sam",
       "sam",
       "sameek@test.com",
       "1",
       ""
   ],...
   

3. If you have the column names already set in the html part, you don't need to add sTitle.

4. The mRender Function takes three parameters:

   • data = The data for this cell, as defined in mData
   • type = The datatype (can be ignored mostly)
   • full = The full data array for this row.

So your mRender function should look like this:

  "mRender": function(data, type, full) {
    return '<a class="btn btn-info btn-sm" href=#/' + full[0] + '>' + 'Edit' + '</a>';
  }

Find a working Plunker here

DataTable add a button to each row

You need a database to persist the state of button. Check below link for server-side processing:

https://datatables.net/examples/data_sources/server_side.html

How to add buttons in each row of data table?

you might be able to use the scoped slot in the component try this:

<b-table>
    <template v-slot:cell(actions)="data">
        <button @click="myAction">Click</button>
    </template>
</b-table>

how to add edit/delete buttons in each row of datatable

well for update and delete button , you need an ID, i assumed the id on database will named as id

 $(document).ready(function() {
      $('#newexample').dataTable({      
        "bProcessing": true,
        "sAjaxSource": "fetchdata.php",
        "aoColumns": [
              { mData: 'title' } ,
              { mData: 'name' },
              { mData: 'year_name' },
              { 
                 mData: '',
                 render: (data,type,row) => {
                   return `<a href='link_to_edit/${row.id}'>update</a>`;
                 }
              }
            ],
      });
  });

reference this

Datatable get button on each row

You can use the node function .node() function to get the element of the selected row. Then you can wrap it in jQuery to perform jQuery actions on it like this:

    $('#apply-all').on('click', function (e) {
        var table  = $('.mydatatable').DataTable();
        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
              var data = this.data(); // able to fetch the data.
              var row = this.node();
              var rowJqueryObject = $(row);
              //or
              $(row).find('button'); //will return all buttons in that row
        } );
    });

Adding button to each row of a datatable with event in angular 2

You can do it using defaultContent key in columns object of datatable. First you need to create a <th> for showing the button column. I have created a stackblitz for achieving this. Please read the comments i have added in that stackblitz carefully before implementing it in your logic. I have added three buttons in it which show the data of current row. See: Buttons In Datatable

Is there a way to add button on each row in datatable? [react js]

in my project I use for this purpose something like this:

let buttonDetails = "<a href='" + urlDetails + "' title='" + titleDetails +"' class='dtDetails' data-target='#remoteModal1' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-search'></span></a>";

let buttonEdit = "<a href='"+urlEdit+"' title='"+titleEdit+"' class='dtEdit' data-target='#remoteModal' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-pencil'></span></a>";

let buttonDelete = "<a href='" + urlDelete + "' title='" + titleDelete +"' class='dtDelete' data-target='#remoteModal1' data-toggle='modal' data-backdrop='static'><span class='glyphicon glyphicon-remove'></span></a>";

...

 "columnDefs": [
    ...
    {
        "targets": [2],
        "width": miCustomWidth,
        "className": "center",
        "data": function (d) {          
            return buttonDetails.replace("ID_X", d.rowIdField) + " " + buttonEdit.replace("ID_X", d.rowIdField) + " " + buttonDelete.replace("ID_X", d.rowIdField);
        }
    }
    ...
    ]

Vue - how can i add a button to each row in a Vuetify datatable?

You can add a new column, set value to action for example, and add a slot in the table as follows:

new Vue({
  el:"#app",
  vuetify: new Vuetify(),
  data() {
    return {
      search: '',
      headers: [
        { text: 'Asset', value: 'symbol' },
        { text: 'Amount', value: 'amount' },
        { text: 'Send', value: 'action' }
      ],
      balances: [
        { symbol: "$", amount: 100 },
        { symbol: "$", amount: 200 },
      ],
    }
  },
  methods: {
    sendRequest(rowData) {
      console.log(rowData)
    }
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script><link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">

<v-app id="app">
  <v-data-table
    :headers="headers"
    :items="balances"
    :items-per-page="5"
    class="elevation-1"
  >
    <template v-slot:item.action="{ item }">
      <v-btn @click="sendRequest(item)">
        Send
      </v-btn>
    </template>
  </v-data-table>
</v-app>