Multiple buttons per rows with different actions

MrJeje

Hi, as stated in the title, im generating a datable with 2 buttons
From now im using THIS tutorial to do so.
It generate 1 button that show values of the row. What im trying to do is like having 2 buttons that can perform 2 differents actions about the same row. For exemple 1 showing the name, an other one showing the position.
The problem is, idk how to tell which one I pressed to call the good script.

To add 2 buttons I changed:
"defaultContent": "<button>Click!</button>"
To
"defaultContent": "<button id=test1>a!</button><button id=test2>b!</button>"

So I just added to them a different ID so I can tell jquery which one im pressing.
Im calling the press of the button like the tutorial, but changing the selector : "example tbody" by "test1"
So my code look like so:

$(document).ready(function() {
var table = $('#example').DataTable( {
    "ajax": "arrays.txt",
    "columnDefs": [ {
        "targets": -1,
        "defaultContent": "<button id=\"test2\">a!</button><button id=\"test3\">b!</button>"
    } ]
} );

$('#test2').on( 'click', 'button', function () {
    var data = table.row( $(this).parents('tr') ).data();
    alert( data[0] +"'s salary is: "+ data[ 5 ] );
} );

} );

The problem is, when im pressing it, nothing appear, I tried to, instead of adding an id, adding directly a "onclick:myFunction()" with 2 different functions for each button, this way work, but when calling the function, using table.row and .data isn't recognise anymore, tried to call the datatble in the function with a simple var table = $('#example').DataTable(); but then I get an error, any idea how to solution this ?

Thanks

MrJeje

Well, I found a trick. When Im pressing one of those button I call the same script, but in the script I check the id or the class, and with the value of it, I choose what to do, exemple with the classes:

<script>
    $(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "arrays.txt",
        "columnDefs": [ {
            "targets": -1,
            "defaultContent": "<button class=\"GetName\">Name!</button><button class=\"GetPosition\">Position!</button>"
        } ]
    } );

    $('#example tbody').on( 'click', 'button', function () {

        var action = this.className; 
        var data = table.row( $(this).parents('tr') ).data();

        if (action=='GetName')
        alert( 'This is the name: '+data[0]);

        if(action == 'GetPosition')
        alert( 'This is the Position: '+data[1]);

    } );
} );
</script>

Im sure there is better way, but if someone wanted to know how to, this a way. You can do with the id by changing
var action = this.className;
by
var action = this.id;

allan

Yes - that will do nicely.

You can also use the class name in the selector:

$('#example tbody').on( 'click', 'button.GetName', function () {

Allan

LouisOh

Hi, how do i add an anchor link to the button and when user clicked will open another window to view?