Add custom button to datatable not working

Question

I want to add custom button in a column called "view services" because I want to display multiple values in that column. How can I add a custom button with custom content to perform a custom function? When user click that button I want to open a bootstrap modal to view the multiple values. How can I do this? I'm new to using datatables.

my code:

$('#appointment-datatable').DataTable({
    processing: true,
    serverSide: true,
    ajax: '/get_appointment_data',
    columns: [
        { data: 'id', name: 'id' },
        { data: 'user_type', name: 'user_type' },
        { data: 'firstname', name: 'firstname' },
        { data: 'lastname', name: 'lastname' },
        { data: 'vehiclemodel', name: 'vehiclemodel' },
        { data: 'date', name: 'date' },
        { data: 'time', name: 'time' },
        { data: 'payment_status', name: 'payment_status' },
        { data: 'amount', name: 'amount' },
        { data: null, render: function(data, type, full, meta) {
            return '<button class="btn btn-mini btn-primary pull-right"> View Service</button>';
        } }
    ],
    dom: 'Bfrtip',
    buttons: [
        { extend: 'print' },
        { extend: 'pdf' },
        { extend: 'excel' }
    ],
 });

yes. datatable is working. but i want add a custom button to each raw — Hashan, Dec 18 '19 at 10:53
I tried this , not working: ` { data: 'services', render: function( data, row, meta) { return ''; } }` — Hashan, Dec 18 '19 at 10:54
try this `data: null, mRender: function (data, type, full) ` — Ahmed Sunny, Dec 18 '19 at 14:14

Amit Sharma · Answer 1 · 2019-12-18T11:06:36.457

0

You can to do this:

$(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>'; }
        }
    ]
});

} );

edited Dec 18 '19 at 11:06

answered Dec 18 '19 at 10:45

Amit Sharma

1,775
3
11
20

I tried this but still not working: ` { data: 'services', render: function( data, row, meta) { return ''; } }` – Hashan Dec 18 '19 at 10:52
datatable is not rendering with above code, any alternative solution? I want to add a button like this `` to each row – Hashan Dec 18 '19 at 10:58
try something like this https://stackoverflow.com/questions/22471862/how-do-i-add-button-on-each-row-in-datatable – Amit Sharma Dec 18 '19 at 11:05
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/204485/discussion-between-amit-sharma-and-hashan). – Amit Sharma Dec 18 '19 at 11:06
click on the chat link please – Amit Sharma Dec 18 '19 at 11:34

sagar · Answer 2 · 2019-12-18T12:23:13.560

try this DataTable. I have added "defaultContent" check its working-

    $('#appointment-datatable').DataTable({
            processing: true,
            serverSide: true,
            ajax: '/get_appointment_data',
            columns: 
                [
                  {
                    data: 'id', 
                    name: 'id'
                  },
                  {
                    data: 'user_type', 
                    name: 'user_type'
                  },
                  {
                    data: 'firstname', 
                    name: 'firstname'
                  },
                  {
                    data: 'lastname', 
                    name: 'lastname'
                  },
                  {
                    data: 'vehiclemodel', 
                    name: 'vehiclemodel'
                  },
                  {
                    data: 'date', 
                    name: 'date'
                  },
                  {
                    data: 'time', 
                    name: 'time'
                  },
                  {
                    data: 'payment_status', 
                    name: 'payment_status'
                  },
                  {
                    data: 'amount', 
                    name: 'amount'
                  },
                  {
                    data: null,
                    "defaultContent": '<button class="btn btn-mini btn- 
          primary pull-right"> View Service</button>'
                  }
                ],
            dom: 'Bfrtip',
            buttons: [
                  {
                    extend: 'print'
                  },
                  {
                    extend: 'pdf'
                  },
                  {
                    extend: 'excel'
                  }
              ],
          })

Add custom button to datatable not working

2 Answers2