How to add button in Jquery DataTable

Question

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

"<button id="x">Click!</button>" syntax error

gcampbell
– gcampbell

2016-07-11 11:48:15 +00:00
Commented Jul 11, 2016 at 11:48 — gcampbell
– gcampbell, Commented Jul 11, 2016 at 11:48

palaѕн · Accepted Answer · 2016-07-11 11:37:39Z

1

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

answered Jul 11, 2016 at 11:37

palaѕн

74.2k17 gold badges123 silver badges140 bronze badges

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

4 Comments

Vikram Anand Bhushan Over a year ago

@palash the word mDataProp shouldn't it be inside "" ??

palaѕн Over a year ago

If you are using quotes in all places, then you can use quotes there too for consistency. In my apps I just don't use quotes to keep code minimal. It works fine both ways.

Vikram Anand Bhushan Over a year ago

@palash one last question suppose I have a column called ID coming from database , I want to show that ID when The button is clicked ? , How can I do that

palaѕн Over a year ago

If you put a debugger inside createBtn you will see that ID is present inside oObj like oObj.ID you can pass that to button using one more attribute like data-val="' + oObj.ID + '" and then inside click you can get it like $(this).data('val'). Hope that make sense!

Collectives™ on Stack Overflow

How to add button in Jquery DataTable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related