Как добавить кнопку в JQuery DataTable

Question

сценарий Таблица Мои данные выглядит следующим образом

var getsourcinglist = function (url){ 

$('#ajaxLoader').show(); 
      $.ajax({ 
       type : 'GET', 
       url : url, 
       beforeSend : function() { 
        console.log('sending request to 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); 
} 

И таблица HTML здесь

<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> 

Я получаю сообщение об ошибке, что кнопка HTML не распознается.

Любая помощь

благодаря

Answer 1

Вместо этого:

{ "mData": "<button id="x">Click!</button>" }, 

сделать

{ mDataProp: null, bSortable: false, bSearchable: false, mRender: createBtn }, 

Теперь добавьте функцию createBtn как: -

function createBtn(oObj) { 
    return '<button class="x">Click!</button>'; 
} 

и делегированы нажмите обработчик события, как:

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