fnDrawCallback has no effect on Child rows

Alex67000 · August 2015

Hi,

I'm using tooltip from bootstrap:

    "fnDrawCallback": function( oSettings ) {
       $('[rel="tooltip"]').tooltip();         
    },

It's working perfectly on usual datatables rows containing a tooltip, but it won't work if it is in a row child. Why?

Alex67000 · August 2015

HTML Example:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">

    <title>DataTables example - Child rows (show extra / detailed information)</title>
    <link rel="stylesheet" type="text/css" href="../../media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="../resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="../resources/demo.css">
    <style type="text/css" class="init">

td.details-control {
    background: url('../resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('../resources/details_close.png') no-repeat center center;
}

    </style>



    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" language="javascript" src="../../media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="../resources/demo.js"></script>
        <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">


    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
    <script type="text/javascript" language="javascript" class="init">


/* 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>'+
            '<td>Tooltip:</td>'+
            '<td><span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span></td>'+
        '</tr>'+
    '</table>';
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "ajax": "objects.txt",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "name" },
            { "data": "position" },
            { "data": "office" },
            { "data": "salary" }
        ],
        "fnDrawCallback": function( oSettings ) {
           $('[rel="tooltip"]').tooltip();         
        },      
        "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');
        }
    } );
} );


    </script>
</head>

<body class="dt-example">
    <div class="container">
        <section>
            <h1>DataTables example <span>Child rows (show extra / detailed information)</span></h1>


            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Salary</th>
                    </tr>
                </thead>

                <tfoot>
                    <tr>
                        <th></th>
                        <th>Name</th>
                        <th>Position</th>
                        <th>Office</th>
                        <th>Salary</th>
                    </tr>
                </tfoot>
            </table>

        </section>

        <h1>Tooltip works outside:</h1>
        <span rel="tooltip" data-toggle="tooltip" data-placement="top" title="" data-original-title="display the tooltip" class="souligne">text with a tooltip</span>       
    </div>



<script type="text/javascript">
$(function() {
    $('[data-toggle="tooltip"]').tooltip(); 
});
</script>

</body>
</html>

AJAX source:

{
"data": [
{
"name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Tiger Nixon<\/span>",
"position": "System Architect",
"salary": "$320,800",
"start_date": "2011/04/25",
"office": "Edinburgh",
"extn": "5421"
},
{
"name": "<span rel=\"tooltip\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"\" data-original-title=\"this is a tooltip\" class=\"souligne\">Test tooltip<\/span>",
"position": "Accountant",
"salary": "$162,700",
"start_date": "2008/11/28",
"office": "Tokyo",
"extn": "5407"
},
{
"name": "Brielle Williamson",
"position": "Integration Specialist",
"salary": "$372,000",
"start_date": "2012/12/02",
"office": "New York",
"extn": "4804"
},
{
"name": "Herrod Chandler",
"position": "Sales Assistant",
"salary": "$137,500",
"start_date": "2012/08/06",
"office": "San Francisco",
"extn": "9608"
},
{
"name": "Rhona Davidson",
"position": "Integration Specialist",
"salary": "$327,900",
"start_date": "2010/10/14",
"office": "Tokyo",
"extn": "6200"
},
{
"name": "Michael Bruce",
"position": "Javascript Developer",
"salary": "$183,000",
"start_date": "2011/06/27",
"office": "Singapore",
"extn": "5384"
},
{
"name": "Donna Snider",
"position": "Customer Support",
"salary": "$112,000",
"start_date": "2011/01/25",
"office": "New York",
"extn": "4226"
}
]
}

You can also see that if you remove:

"fnDrawCallback": function( oSettings ) {
   $('[rel="tooltip"]').tooltip();         
},

usual rows containing a tooltip won't work.

Sources :

http://datatables.net/download/packages

http://your-url/examples/api/row_details.html

Just change the file row_details.html with my html code to see the test case (and add the file objects.txt to the same folder).

Any help appreciated!

fnDrawCallback has no effect on Child rows

fnDrawCallback has no effect on Child rows

Answers

Howdy, Stranger!

Categories

DataTables

fnDrawCallback has no effect on Child rows

fnDrawCallback has no effect on Child rows

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables