Adding buttons to jquery datatables that will correspond to row data id

Question

OK I'm using jQuery datatables

I have

$(document).ready(function() {
    $('#companylist').DataTable( {
       dom: "Bfrtip",
        ajax: {
        url: 'data/companylist-ajax.php',
        dataSrc: '',
    },
    aLengthMenu: [[10, 25, 50], [10, 25, 50]],
   bPaginate:true,
   scrollX: "100%",
   order: [[ 0, "desc" ]],
   scrollCollapse: true,
        "columns": [
            { "data": "company_id" },
            { "data": "regoffice_city" },
            { "data": "regoffice_country" },
            { "data": "is_customer" },
            { "data": "is_supplier" },
            {"data": null,
            "defaultContent": "<a href=' + data[0] +'><i class=\"fa fa-fw fa-times\" style=\"color:red\"></i>Delete</button>",
            "targets": -1
          }
        ]
    } );
} );

What I am trying to do is that the button href will contain the company_id for the row of data being displayed However all it displays is localhost/ + data[0] + in the url I have tried company_id and other things I can think of but nothing works

Rory McCrossan · Accepted Answer · 2018-08-29 09:01:13Z

1

defaultContent only accepts a string, and it has no knowledge of the data within the row.

To achieve what you require, use render() instead. This takes a function which accepts the current row's data and returns the HTML string to be displayed within that column. Try this:

{
  data: null,
  render: function(data) {
    return '<a href="' + data[0] + '"><i class="fa fa-fw fa-times" style="color: red"></i>Delete</button>';
  }  
  targets: -1
}

Also note that I fixed the quotes, so you don't need to escape the inner ".

answered Aug 29, 2018 at 9:01

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

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

6 Comments

Chris Yates Over a year ago

Not getting any data displayed on the table now

Rory McCrossan Over a year ago

Check the console for errors. Also ensure that data[0] holds the value you're expecting it to

Chris Yates Over a year ago

Awesome thanks.. turns out it was the target -1 causing the issue so I removed that and its now working correctly Many thanks

Chris Yates Over a year ago

do you know why lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]], isnt showing the dropdown menu ? Its only letting me post every 90 mins

Rory McCrossan Over a year ago

That's the detfault setting, so should work fine. Check the console for errors. Also ensure you're not overwriting the default dom setting to remove the paging list: datatables.net/forums/discussion/29866/…

|

Collectives™ on Stack Overflow

Adding buttons to jquery datatables that will correspond to row data id

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related