jquery datatables plug-in issue

Question

I am using jquery datatables and adapted the following example

        /* Formatting function for row details - modify as you need */
    function format ( d ) {
     // `d` is the original data object for the row
    return '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
    '<tr>'+
        '<td>Full name:</td>'+
        '<td>'+d.name+'</td>'+
    '</tr>'+
    '<tr>'+
        '<td>Extension number:</td>'+
        '<td>'+d.extn+'</td>'+
    '</tr>'+
    '<tr>'+
        //IMPORTANT PART
        '<td>' + '<input type="text" id="inp">' + '</td>'+
        '<td>' + '<button id="butt">' + 'click' + '</button>' + '</td>'+
    '</tr>'+
  '</table>';
 }

     $(document).ready(function() {
     var table = $('#example').DataTable( {
    "ajax": "../ajax/data/objects.txt",
    "columns": [
        {
            "class":          'details-control',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" }
    ],
    "order": [[1, 'asc']]
} );

// Add event listener for opening and closing details
$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
       } );
 } );

The output of this code is shown here http://www.datatables.net/examples/api/row_details.html In the row child for each row I've added an input box and a button from where I want to handle the input of the user. For instance, I would like to take the input of the user and construct a link which will open a new window. However, I could not find in the documentation events related to children of the rows in the datatables library? For example, I would like to do something like

     $('#example tbody').on('click', '#butt', function () {
           //do something
     });

the id 'butt' above is a button which is part of the row child. In other words, I would like to manipulate the elements in the row child, not the row itself.

Tim Hobbs · Accepted Answer · 2014-11-18 21:37:50Z

1

Since datatables adds the element to the DOM you'll have to use a delegate for selection, something like:

$('body').on('click', '#example tbody #butt', function () {
    //do something
});

It doesn't necessarily have to be body, but you'll need an element that is not dynamically added to the DOM for jQuery to use.

Also, ID's should be unique, so you won't want to add a button with the same ID to every row. If you need to add multiple buttons you'll want to use a class, bind to the elements with that class, and then handle each one to get the appropriate context.

answered Nov 18, 2014 at 21:37

Tim Hobbs

2,02717 silver badges24 bronze badges

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

2 Comments

george Over a year ago

Can I use that outside the document.ready function which I use for constructing the table?

Tim Hobbs Over a year ago

The event handler is attached to the body element, so long as the body element is rendered then yeah, it should be fine - which I am sure it will be fine. However, there is not really any necessity to binding the event in or outside of the document.ready function - it should work either way and it is probably a better idea to put it inside anyway. See stackoverflow.com/a/2645353/189937

Collectives™ on Stack Overflow

jquery datatables plug-in issue

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related