DataTable columns call onclick function with data{0}

SalmanS

Hello Everyone,

I am struggling for hours now, i got a function which is called editMember in javascript, what i am trying to do is pass my columns "Data"."0" when the edit button is clicked.

I am getting an error

Uncaught ReferenceError: data is not defined at HTMLAnchorElement.onclick (index.php:1)

Here is code:

"columns": [ 

                { "data": "0", "name": "0", "autoWidth": true },
                    { "data": "1", "name": "1", "autoWidth": true },
                    { "data": "2", "name": "2", "autoWidth": true },
                    { "data": "3", "name": "3", "autoWidth": true },
         {
                    
        "orderable":      false,
                "data":  "null",
                "className": "center",
                "defaultContent": '<a type="button" class="btn btn-primary"  data-toggle="modal" data-target="#editMemberModal"  onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a> / <a href="" class=class="btn btn-danger">Delete</a>'
            }

Please can someone help?

onclick="editMember(data[0])"

colin

Hi @SalmanS ,

I'm not clear if the edit button is in the row or outside. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

SalmanS

Hi colin,
first of all apologies, the column is inside the row as you can see i defined the column placed alongside the returned columns defination "data": "null", you will notice i used default content: <A type ="Button"> please see below the code:

"defaultContent": '<a type="button" class="btn btn-primary" data-toggle="modal" data-target="#editMemberModal" onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a>

                "data":  "null",
               "orderable":      false,
                "className": "center",
                "defaultContent": '<a type="button" class="btn btn-primary"  data-toggle="modal" data-target="#editMemberModal"  onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a> / <a href="" class=class="btn btn-danger">Delete</a>'
            }

SalmanS

Hi colin,
First of all my apologies - I was not sure about the test case earlier, will update this afternoon when I am close the home laptop,

In the meantime, the column is inside the row within column destination, as you can noticed i defined the column placed alongside the returned columns definition "data": "null", you will notice i used default content: <A type ="Button"> please see below the code:

"defaultContent": '<a type="button" class="btn btn-primary" data-toggle="modal" data-target="#editMemberModal" onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a>

                "data":  "null",
               "orderable":      false,
                "className": "center",
                "defaultContent": '<a type="button" class="btn btn-primary"  data-toggle="modal" data-target="#editMemberModal"  onclick="editMember(data[0])"> <span class="glyphicon glyphicon-edit"></span>Edit</a> / <a href="" class=class="btn btn-danger">Delete</a>'
            }

SalmanS

Here is the js fiddle

http://live.datatables.net/meqitiho/1/

colin

Gotcha. This example here should help. Don't do the onclick, do a click handler like that example,

C

SalmanS

Many thanks, love you colin bhai for that simple solution.

1. Can i directly use click from with the <a type="button" click ="editMember(data[0])"> </a> - If not how do i call my editMember function

           $('#example tbody').on( 'click', 'button', function () {
                   var data = table.row( $(this).parents('tr') ).data();
                   editMember(data[0]);
               } );
   

2. and what if I got edit two buttons edit and delete?

3. "targets": -1, -- What does it do "targets":-1? I guess it is selected data{0]?

Many thanks for your earlier response.

SalmanS

$(document).ready(function() {
    var table = $('#example').DataTable();

    $('#example tbody').on('click', 'tr', function () {
        var data = table.row( this ).data();
        alert( 'You clicked on '+data[0]+'\'s row' );
    } );
} );

SalmanS

`table.on( 'select', function () {
    var rowData = table.rows( { selected: true } ).data()[0]['title'];
    // now do what you need to do wht the row data

} );`

colin

This example here is another one that will help. This has a link in the final column, you can easily create two, both with different classes, and have different click handlers. That click handler would then call your editMember() function.

SalmanS

Colin Bhai is the World Champion - Authentic Hyderabadi Curry and Biryani on me, whenever you are available?

colin

Always available for a curry

SalmanS

Issue resolved, here is my final code.

    $('#manageMemberTable tbody').on( 'click', 'a.edit', function () {
            var data = manageMemberTable.row( $(this).parents('tr') ).data();
            editMember(data[0]);
                } );

SalmanS

Hi Colin, regarding curry issue, my wife next to me says, she will make curry and biryani for you, let us know when you are available?

She says, we have a zeal to cook for those who are zealous for the Hyderabadi cuisine.
We are based in Worcester near Birmingham, let us know if you have any plans visiting worcester?

colin

Thank you, that's very kind, I will!