Passing values to an onclick function inside a Datatables table

Question

I've got a table in my page wrapped up in Datatables. The data is being grabbed from a php file perfectly and there is no problem with the code in that part. However, I've got a problem with buttons inside the table. The followings are the columns inside my Datatables table:

columns: [
            {"data": "id"},
            {"data": "name"},
            {data: null, render: function(data, type, row) {
                    return '<a href="#" onclick="" class="buttons edit-button"><span class="fa fa-pen"></span></a>'
                }},
        ],

As you can see, I have defined three columns, the first of which is 'id', the second 'name' and the third a column including a button. My problem is related to this button. In fact, I want to call a function, for instance, edit(), whenever this button is clicked. The edit() function gets the value of 'name' (second column) as its parameter. Now the question is this: how can I pass the value of the second column to the function edit() when the button is clicked; as a result, the onClick call of the third column shall be something like this: onclick="edit(name.val)"... I have left this onClick="" empty, because I don't know how to do this.

Millions of thanks in advance.

H. M.. · Accepted Answer · 2020-04-01 16:44:54Z

2

After dealing with the problem for a couple of hours, I came to know that with a simple javascript concatenation, the problem could be solved.

Previously, the block was like the following:

<a href="#" onclick="" class="buttons edit-button"><span class="fa fa-pen"></span></a>

and I had problems with onclick call where I could not pass a parameter for the functions. To solve the problem, I changed the block a little bit and used concatentation, and voila, the problem was gone. This should turn into

return '<a href="#" onclick="edit(' + data.name +')" class="buttons edit-button"><span class="fa fa-times-circle"></span></a>'

edited Apr 1, 2020 at 16:44

answered Mar 4, 2020 at 2:57

H. M..

6797 silver badges20 bronze badges

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

2 Comments

Gloria Chen Over a year ago

It doesn't work after you click the button, it will give Uncaught ReferenceError

H. M.. Over a year ago

It does. No errors show up.

andrewJames · Accepted Answer · 2020-03-04 02:36:46Z

Here is a working example. It uses the data function described on this page. The relevant part is this:

{ "data": function ( row, type, val, meta ) {
    return "the data in column 1 is '" + row[0] + "'";
  } 
}

In the three-column table (below), the third column is populated based on data from the first column.

Here is the full sample - you should be able to adapt this technique to your situation:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Animals</title>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.20/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="animals" class="display dataTable cell-border" style="width:100%">
  <thead>
   <tr><th>Animal</th><th>Collective Noun</th><th>Customized Data</th></tr>
  </thead>
  <tbody>
    <tr><td>antelopes</td><td>herd</td><td></td></tr>
    <tr><td>elephants</td><td>herd</td><td></td></tr>
    <tr><td>hounds</td><td>pack</td><td></td></tr>
    <tr><td>kittens</td><td>kindle</td><td></td></tr>
    <tr><td>lions</td><td>pride</td><td></td></tr>
    <tr><td>ravens</td><td>unkindness</td><td></td></tr>
    <tr><td>whales</td><td>pod</td><td></td></tr>
    <tr><td>zebras</td><td>herd</td><td></td></tr>
  </tbody>
</table>

</div>

<script type="text/javascript">

  $(document).ready(function() {
    var table = $('#animals').DataTable({
      "columns": [
        null,
        null,
        { "data": function ( row, type, val, meta ) {
            //console.log(row);
            //console.log(type);
            //console.log(val);
            //console.log(meta);
            return "the data in column 1 is '" + row[0] + "'";
          } 
        }
      ]
    });

  });
</script>

</body>

The (commented-out) console logging statements are there so you can take a closer look at how the function works, if you wish.

Chamara Fernando · Accepted Answer · 2022-10-11 06:16:34Z

0

make use the edit method is placed outside jquery initiation in golobal level

function edit(){
 //content
}

jQuery(document).ready(function() {
  //data-tables script here
}

answered Oct 11, 2022 at 6:16

Chamara Fernando

1

Comments

HuntsMan · Accepted Answer · 2023-03-02 16:37:52Z

0

First is defined your function outside this $(document).ready(function ()}) make it global then you can call the function like this.

<script>
  function nameLogMe(data) {
    console.log(data)
  }
  $(document).ready(function () {
    $('#table').DataTable({
      columns: [
        {"data": "id"},
        {"data": "name"},
        {data: null, render: function(data, type, row) {
                return '<a href="#" onclick="nameLogMe(`'+ data +'`)" class="buttons edit-button"><span class="fa fa-pen"></span></a>'
            }},
      ],
    })
 });
</script>

answered Mar 2, 2023 at 16:37

HuntsMan

8126 silver badges16 bronze badges

Comments

Lucas · Accepted Answer · 2023-05-09 17:30:25Z

0

Quotes must be escaped.

Like:

return "<a href='#' style='display: flex; justify-content: center; align-items: center;' onclick='showSmoke(\""  + oObj.aData.chaveNotaFiscal + "\")'><span class='material-icons-outlined'>key</span></a>";

edited May 9, 2023 at 17:30

answered May 9, 2023 at 17:30

Lucas

11 bronze badge

Collectives™ on Stack Overflow

Passing values to an onclick function inside a Datatables table

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related