Question

175

How do I add button on each row in datatable?

rated 0 times [ 179] [ 4] / answers: 1 / hits: 160662 / 10 Years ago, tue, march 18, 2014, 12:00:00

I am newbie for DataTables. I want to add button on each row for edit and delete(like below image)

enter

I have tried with code:

Test.cfm

<table id=myDataTable class=table table-striped table-bordered>

<thead>

    <tr>

        <th>UserID</th>

        <th>Name</th>

        <th>UserName</th>

        <th>Passowrd</th>

        <th>Email</th>

         <th>IsActive</th>

         <th>Command</th>

    </tr>

</thead>

<tbody> 

</tbody>

$(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 '<a href=#/' + o.userid + '>' + 'Edit' + '</a>'; }

            }

        ]

    });



} );

fetchUserData.cfm

{

aaData: [

    [

        1,

        sameek,

        sam,

        sam,

        [email protected],

        1,

        

    ],

    [

        2,

        arun singh,

        arun,

        arun,

        [email protected],

        0,

        

    ],

    [

        9,

        s s,

        sam3,

        sam3,

        [email protected],

        0,

        

    ],

    [

        10,

        sameek mishra,

        sam56,

        sam,

        [email protected],

        0,

        

    ],

    [

        11,

        narendra kumar,

        narendra,

        nav,

        [email protected],

        1,

        

    ],

    [

        12,

        test test,

        test,

        test,

        [email protected],

        1,

        

    ]

]

 }

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

martin

Add To Favorites

Follow

Total Points: 405

Total Questions: 93

Total Answers: 93

Location: Mexico

Member since Sun, Jul 25, 2021

3 Years ago

answered 10 Years ago katelynn · Accepted 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,

    [email protected],

    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 '<a class=btn btn-info btn-sm href=#/' + full[0] + '>' + 'Edit' + '</a>';

  }

Find a working Plunker here