javascript - How to add button in Jquery DataTable -

my data table script looks

var getsourcinglist = function (url){  $('#ajaxloader').show();             $.ajax({                 type  : 'get',                 url   : url,                 beforesend : function() {                     console.log('sending request fetch');                 },                 success : function(data) {                     $('#ajaxloader').hide();                   printthesourcinglistview(data);                 },                 error: function(data){                     $('#ajaxloader').hide();                     console.log(data);                 }              });  }  var printthesourcinglistview = function(data){      var trhtml = "" ;      var table = $('#datatable1').datatable({     "bprocessing": true,     aadata: data,     buttons: [         'copy', 'excel', 'pdf'     ],     "aocolumns": [             { "mdata": "rrno" },             { "mdata": "name" },             { "mdata": "dob" },             { "mdata": "gender" },             { "mdata": "job_profile" },             { "mdata": "graduation" },             { "mdata": "total_exp" },        { "mdata": "phone" },        { "mdata": "salary_drawn" },        { "mdata": "salary_expected" },        { "mdata": "email" },        { "mdata": "status" },       { "mdata": "<button id="x">click!</button>" },       ],  });      table.buttons( 'output:name', '.export' ).enable();      console.log(table); } 

and html table here

<table id="datatable1" class="table  table-bordered table-striped-col">   <thead>     <tr>       <th>sourcing id</th>       <th>name</th>       <th>dob</th>       <th>gender</th>       <th>job profile</th>       <th>basic / graduation</th>       <th>total exp</th>       <th>contact</th>       <th>salary drawn</th>       <th>salary expected</th>       <th>final status</th>       <th>email</th>       <th>action</th>     </tr>   </thead>   </table> 

i error button html not recognized .

any

thanks

instead of this:

{ "mdata": "<button id="x">click!</button>" }, 

do

{ mdataprop: null, bsortable: false, bsearchable: false, mrender: createbtn }, 

now add createbtn function like:-

function createbtn(oobj) {     return '<button class="x">click!</button>'; } 

and delegated click event handler like:

$(document).on('click', '.x', function (e) {     alert('button clicked!'); });