How do I add button on each row in datatable

Question

I am newbie for DataTables  I want to add button on each row for edit and delete like below image     I have tried with code    Test cfm   lt table id  myDataTable  class  table table-striped table-bordered  gt   lt thead gt       lt tr gt           lt th gt UserID lt  th gt           lt th gt Name lt  th gt           lt th gt UserName lt  th gt           lt th gt Passowrd lt  th gt           lt th gt Email lt  th gt            lt th gt IsActive lt  th gt            lt th gt Command lt  th gt       lt  tr gt   lt  thead gt   lt tbody gt    lt  tbody gt        document  ready function          var oTable       myDataTable   dataTable              bServerSide   true           sAjaxSource    fetchUserData cfm            bProcessing   true           sPaginationType    full numbers            aoColumns                    mData   null                   mData    Name    sTitle    Name     sWidth    20                    mData    UserName    sTitle    UserName    sWidth    20                     mData    Passowrd   sTitle    Passowrd    sWidth    20                      mData    Email   sTitle    Email      sWidth    20                    mData    IsActive   sTitle    IsActive     sWidth    20                                     mData   null                   bSortable   false                  mRender   function  o    return   lt a href       o userid     gt      Edit      lt  a gt                                              fetchUserData cfm     aaData                    1            sameek            sam            sam            sameek test com            1                                    2            arun singh            arun            arun            arunsingh test com            0                                    9            s s            sam3            sam3            ss s com            0                                    10            sameek mishra            sam56            sam            same s com            0                                    11            narendra kumar            narendra            nav            sa sa com            1                                    12            test test            test            test            test2 test com            1

User · Answer

Take a Look    document  ready function                       datatable   DataTable               columns                       data    ID                        data    AuthorName                        data    TotalBook                        data    DateofBirth                        data    OccupationEN                           data   null  title   Action   wrap  true   quot render quot   function  item    return   lt div class  quot btn-group quot  gt   lt button type  quot button quot  onclick  quot set value     item ID      quot  value  quot 0 quot  class  quot btn btn-warning quot  data-toggle  quot modal quot  data-target  quot  myModal quot  gt View lt  button gt  lt  div gt                                               bServerSide  true              sAjaxSource   EmployeeDataHandler ashx

User · Answer

my recipe   datatable declaration        defaultContent    lt button type  button        events       usersDataTable tbody   on   click     delete-user-btn   function      var user data   table row    this  parents  tr     data

User · Answer

take a look here    this was very helpfull to me https   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     lt button gt Click  lt  button gt                     example tbody   on   click    button   function          var data   table row    this  parents  tr     data        alert  data 0     s salary is     data  5

User · Answer

well  i just added button in data  For Example   i should code like this      target  DataTable   row add message  draw     And  in message  i added button like this    blah  blah       lt button gt Click  lt  button gt    and   it works

User · Answer

I contribute with my settings for buttons  view  edit and delete  The last column has data  null At the end with the property defaultContent is added a string that HTML code  And since it is the last column  it is indicated with index -1 by means of the targets property when indicating the columns         columns          title       data   null  defaultContent          Si pone da error al cambiar de paginas la columna index con numero de fila       title   Id    data    id   defaultContent       visible  false          title   Nombre    data    nombre           title   Apellido    data    apellido           title   Documento    data    tipo documento siglas           title   Numero    data    numero documento           title   Fec Nac    format   dd mm yyyy    data    fecha nacimiento      formato       title   Tel  fono    data    telefono1           title   Email    data    email1            title       data   null      columnDefs                   searchable   false           orderable   false           targets   0                     width   3           targets  0    la primer columna tendra una anchura del  20  de la tabla                      targets  -1    -1 es la ultima columna y 0 la primera         data  null          defaultContent    lt div class  btn-group  gt   lt button type  button  class  btn btn-info btn-xs dt-view  style  margin-right 16px   gt  lt span class  glyphicon glyphicon-eye-open glyphicon-info-sign  aria-hidden  true  gt  lt  span gt  lt  button gt    lt button type  button  class  btn btn-primary btn-xs dt-edit  style  margin-right 16px   gt  lt span class  glyphicon glyphicon-pencil  aria-hidden  true  gt  lt  span gt  lt  button gt  lt button type  button  class  btn btn-danger btn-xs dt-delete  gt  lt span class  glyphicon glyphicon-remove glyphicon-trash  aria-hidden  true  gt  lt  span gt  lt  button gt  lt  div gt                orderable  false  searchable  false  targets  -1     Ultima columna no ordenable para botones             enter image description here

User · Answer

Basically your code is okay  thats the right way to do this  Anyhow  there are some misunderstandings    fetchUserData cfm does not contain key value pairs  So it doesn t make sense to address keys in mData  Just use mData index  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                 If you have the column names already set in the html part  you don t need to add sTitle  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   lt a class  btn btn-info btn-sm  href       full 0      gt      Edit      lt  a gt          Find a working Plunker here

User · Answer

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                       lt a href   lt  php echo  delete url   gt    data      gt  lt i class  fe fe-delete  gt  lt  i gt  lt  a gt                     data

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

Examples related to javascript

Examples related to jquery

Examples related to datatables