Dynamically create different buttons with ajax server side datatable

Question

This is the table;

 <table id="example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Extn.</th>
            <th>Start date</th>
            <th>Process</th>
        </tr>
    </thead>
</table>

and here is the javascript ;

 $(document).ready(function () {
        var table = $('#example').DataTable({
            "sPaginationType": "full_numbers",
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "ServerSideProcessor.aspx",
            "columnDefs": [{
                "targets": -1,
                "data": null,  
                "defaultContent": "<button type='button' class='btn btn-success'>PAY</button>"
            }]
        });

        $('#example tbody').on('click', 'button', function () {
            var data = table.row($(this).parents('tr')).data();
            alert(data[1] + " is recieved.");
        });
    });

What I need is create different type of buttons in "Process" coloumb, for example ;

"columnDefs": [{
                "targets": -1,
                "data": null,  
               if(data[5]=='1')
                "defaultContent": "<button type='button' class='btn btn-success'>PAY</button>"
               else
"defaultContent": "<button type='button' class='btn btn-warning'>UNPAID</button>"
            }]
        });

How can I accomplish that ? Thank you

markpsmith · Accepted Answer · 2015-11-06 14:46:27Z

1

Use render to define the output like this:

"render": function ( data, type, full) {
   if(full[5] == '1'){
        return "<button type='button' class='btn btn-success'>PAY</button>";
    }else{
        return "<button type='button' class='btn btn-warning'>UNPAID</button>";
    }
}

Here is a working jsfiddle DEMO. I've changed the condition to make it work with the dummy data, but you get the idea.

answered Nov 6, 2015 at 14:46

markpsmith

4,9182 gold badges38 silver badges65 bronze badges

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

1 Comment

EHU Over a year ago

That was exactly what I was looking for, thank you sir!

Collectives™ on Stack Overflow

Dynamically create different buttons with ajax server side datatable

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related