CODEWITHSUNDEEP
javascriptjquerydatatables
Vikram Anand Bhushan
Vikram Anand Bhushan

Reputation: 4886

How to add button in Jquery DataTable

My Data Table script looks like this 

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);
}

And the HTML table is 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 get an error that the button HTML is not recognized .

Any help

thanks

Upvotes: 0

Views: 736

Answers (1)

palaѕн
palaѕн

Reputation: 73906

Instead of this:

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

do

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

Now add the createBtn function like:-

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

and a delegated click event handler like:

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

Upvotes: 1

Related Questions