Create a dynamic button click event in datatable cell

Question

Please I am trying to create a button with an onlick event to run a function in a datatable cell like below, it creates successfully, but I get an error when the button is clicked to trigger the function.

The issue is in the render switch case 0. The error I get is

SyntaxError: expected expression, got '}'

My code:

function LoadHistory(phone) {
    $.ajax({
        url: '/api/TransferFunds/' + phone,
        //data: '{"phone":"' + phone + '"}',
        type: 'Get',
        dataType: 'json',
        contentType: "application/json; charset-utf-8",
        success: function (data) {
            datatableVariable = $('#table').DataTable({
                data: data,
                autoWidth: true,
                responsive: false,
                paging: true,
                lengthChange: false,
                searching: false,
                ordering: false,
                info: true,
                //'autoWidth': false,
                //'order': [[0, "desc"]],
                columns: [
                    { 'data': 'id' },
                    { 'data': 'transType' },
                    { 'data': 'network' },
                    { 'data': 'phoneNumber' },
                    { 'data': 'internalReference' },
                    {
                        'data': 'amount',
                        "render": function (value) {
                            return "GHS" + formatmoney(value);
                        }
                    },
                    {
                        'data': 'dateSent',
                        "render": function (value) {
                            return value;
                        }
                    },
                    {
                        'data': 'status',
                        "render": function (data, type, row, meta) {
                            var evt = row['internalReference'];
                            //return GetStatus("' + evt + '");
                            //alert(nt);
                            switch (data) {
                                case 0:
                                    return '<button class="btn btn-default" onclick="return GetStatus("' + evt + '");">Pending&nbsp;&nbsp;&nbsp;</button>';
                                    break;
                                case 1:
                                    return '<button class="btn btn-success" >Successful</button>';
                                    break;
                                case 2:
                                    return '<div class="btn btn-warning">Rejected&nbsp;&nbsp;</div>';
                                    break;
                                case 3:
                                    return '<div class="btn btn-danger">Failed&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</div>';
                                    break;
                                default:
                                    break;
                            }
                        }
                    }
                ],
                columnDefs: [
                    { "visible": false, "targets": 0 },
                     { "visible": false, "targets": 4 }                       
                ]
            });
            //$( document ).ajaxStart(function() {
            //    $( "#loading" ).show();
            // });
            $(document).ajaxComplete(function (event, request, settings) {
                //$('#loading-indicator').hide();
                //$('body').loadingModal('hide');
            });
        }
    });
}

Right click on the button, choose "Inspect", look at what is inside that onclick="...", and fix it. (or simply console.log(evt);, even better) — blex
– blex, Commented Mar 22, 2020 at 11:28

M A Salman · Accepted Answer · 2020-03-22 12:02:14Z

1

Try using template literals to embed something in the string

return `<button class='btn btn-default' onclick='GetStatus("${evt}")'>Pending&nbsp;&nbsp;&nbsp;</button>`

answered Mar 22, 2020 at 12:02

M A Salman

3,8302 gold badges14 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

michael marmah Over a year ago

Thank you @Supercool, you really saved me time. Thank you so much, am grateful. It worked as expected, now I can trigger the function on button click dynamically.

M A Salman Over a year ago

@michael if you found my answer useful please upvote it.

Collectives™ on Stack Overflow

Create a dynamic button click event in datatable cell

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related