如何在 Jquery DataTable 中添加按钮

我的数据表脚本如下所示

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 无法识别。

任何帮助

谢谢