Question 172027 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Can I pass an ID when clicking a button in a JQuery DataTable?

how do I pass the id to my event here?

            {
              var tr = $(this).closest('tr');
              var id = tr.children('td:eq(0)').text()
              data: null,
              render: function ( data, type, row ) {
                return '<button id="btnAddNotes" type="button" class="btn btn-success" data-toggle="modal" data-target="#my_modal">Add Notes</button>';
              }
            },

and I’m reading it like this

$(document).on("click", "#btnAddNotes", function (e) {
 //here is where I want to see the id i'm passing
}

EDIT
This is how I construct the column, and I want to use the id of the row for the column At Location -> how would I set that up?

columns: [
{ 
    title: "At Location",
    data: "id" ,
    width: "10%",
    className: "text-center",
    render: function (data, type, full, meta){
    return '<input type="checkbox" name="id[]" value="' + $('<div/>').text(data).html() + '">';
    }
},
{
    title: "Notes",
    render: function(data, type, row, meta) {
    return '<button data-id="' +
    row. + // I want to use the At Location value
    '" class="btn" type="button">Add Notes</button>'; }
}
]
Tags:

2

Answers


  1. 0

    You can add it as a data- attribute.

    var tr = $(this).closest('tr');
var id = tr.children('td:eq(0)').text()
{
  data: null,
  render: function(data, type, row) {
      return '<button id="btnAddNotes" type="button" data-id="' + id + '" class="btn btn-success" data-toggle="modal" data-target="#my_modal">Add Notes</button>';
  }
}



$(document).on("click", "#btnAddNotes", function(e) {
  var id = $(this).attr("data-id");
})
    Login or Signup to reply.
  2. 0

    Short Answer:

    Use the DataTables API to populate the ID you want to use.

    Longer Explanation:

    You are already using the API in your column render function – so we can take advantage of that (I have simplified your HTML slightly):

    render: function ( data, type, row, meta ) {
  return '<button data-id="' + 
      meta.row + // the internal ID of the DataTable row
      '" class="btn" type="button">Add Notes</button>';
}

    In this case I use meta.row to get the unique DataTables row index (which starts at 0 for the first row).

    I assign it to the data-id attribute – but I could assign it to the id attribute also, since the value is guaranteed to be unique for each row (and therefore for each button).

    I can access this using the following:

    $(document).on("click", ".btn", function (e) {
  var id = $(this).attr("data-id");
  console.log( id );
});

    If you want to populate the data-id attribute with an actual value from the data row, then you can use the row parameter instead of the meta parameter.

    Here is a runnable demo, using an external Ajax data test source, courtesy of the jsonpaceholder web site:

    $(document).ready(function() {

  var table = $('#example').DataTable({
    ajax: {
      method: "GET",
      url: "https://jsonplaceholder.typicode.com/posts",
      dataSrc: ""
    },
    "columns": [{
        // https://datatables.net/reference/option/columns.render
        render: function(data, type, row, meta) {
          return '<button data-id="' +
            row.title + // the value of the "TITLE" column from the data
            '" class="btn" type="button">Add Notes</button>';
        }
      },
      {
        "title": "User ID",
        "data": "userId"
      },
      {
        "title": "ID",
        "data": "id"
      },
      {
        "title": "Title",
        "data": "title"
      }
    ]

  });

  $(document).on("click", ".btn", function(e) {
    var id = $(this).attr("data-id");
    console.log(id);
  });

});
    <!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Demo</title>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>

<body>

  <div style="margin: 20px;">

    <table id="example" class="display" style="width:100%"></table>

  </div>



</body>

</html>

    The above demo uses row.title in the render function, just as an example.

    Warning: Depending on what you do with the selected data, you may run into problems. To be safe, you should probably only use a column where the values are guaranteed to be unique.

    And you must guarantee uniqueness if you want to use the id attribute instead of a data-* attribute.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search