Button onClick inside DataTables doesn't show the correct url

Question

I'm displaying all the customer data using DataTables like this:

<script type="text/javascript" src="DataTables/datatables.min.js"></script>
    <script>
    var theTable = null;

    $(document).ready(function() {
        theTable = $('#table-customer').DataTable({
            "processing": true,
            "serverSide": false,
            "ordering": true, 
            "order": [[ 0, 'asc' ]], 
            "ajax":
            {
                "url": "http://localhost/myshop/showdata.php", 
                "type": "GET"
            },
            "sAjaxDataProp": "data",
            "deferRender": true,
            "aLengthMenu": [[5, 10, 20, 50],[ 5, 10, 20, 50]], 
            "columns": [
                { data: "cust_id" }, 
                { data: "cust_name" }, 
                { data: "cust_addr" },
                { data: "cust_email" },
                { data: "cust_phone" },
                { data: "cust_photo", sortable: true, render: function (o) { return '<button id="btn1" onclick="displayImage(data)">Show</button>';}
            ]
        });
    });

    function displayImage(link){
      window.alert(link);
    }

    </script>

All information is displayed properly, except 1 thing: if you click any button on "customer photo" column, instead of showing an alert which shows its URL, nothing happens. Inspecting the page showed me this:

Uncaught ReferenceError: data is not defined at HTMLButtonElement.onclick (view.html:1)

How to fix this?

andrewJames · Accepted Answer · 2020-10-15 13:07:16Z

The columns.data render function builds a string which is returned:

function (o) { return 'your string here, including data value'; }

You have to (a) concatenate your data variable with the string literals you need; and (b) use the variable name you provided - I will use data instead of o:

function (data) { return 'your string here, including ' + data + ' value'; }

So, if we provide all the possible parameters allowed in the renderer, that becomes:

{ 
  "data": "cust_photo", 
  "sortable": true, 
  "render": function(data, type, row, meta) {
    return '<button id="btn1" onclick="displayImage(\'' + data + '\')">Show</button>';
  }
}

I use \' to ensure the value of the data variable is surrounded in single quotes.

(Note that in your question, the code is also missing a closing }.)

But to avoid potential issues with sorting and filtering, these column data render functions need to account for DataTable's use of orthogonal data.

The type parameter can be used for this:

{ 
  "data": "cust_photo", 
  "sortable": true, 
  "render": function(data, type, row, meta) {
    if (type === 'display') {
      return '<button id="btn1" onclick="displayImage(\'' + data + '\')">Show</button>';
    } else {
      return data; // type is for sorting or filtering - just use the raw value
    }
  }
}

Collectives™ on Stack Overflow

Button onClick inside DataTables doesn't show the correct url

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related