How do I add button on each row in datatable? How do I add button on each row in datatable? javascript javascript

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


take a look here... this was very helpfull to mehttps://datatables.net/examples/ajax/null_data_source.html

$(document).ready(function() {    var table = $('#example').DataTable( {        "ajax": "data/arrays.txt",        "columnDefs": [ {        "targets": -1,        "data": null,        "defaultContent": "<button>Click!</button>"    } ]} );$('#example tbody').on( 'click', 'button', function () {    var data = table.row( $(this).parents('tr') ).data();    alert( data[0] +"'s salary is: "+ data[ 5 ] );    } );} );


var table =$('#example').DataTable( {    data: yourdata ,    columns: [        { data: "id" },        { data: "name" },        { data: "parent" },        { data: "date" },        {data: "id" , render : function ( data, type, row, meta ) {              return type === 'display'  ?                '<a href="<?php echo $delete_url;?>'+ data +'" ><i class="fe fe-delete"></i></a>' :                data;            }},    ],    }}