Sliding child row not working for me

Sliding child row not working for me

bharbhar Posts: 18Questions: 6Answers: 0

Here is the code for animationcompanyindex.html

<!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>Company - Row details</title>
<link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="media/css/dir.css">
<link rel="stylesheet" type="text/css" href="examples/resources/syntax/shCore.css">
<link rel="stylesheet" type="text/css" href="examples/resources/demo.css">

<style type="text/css" class="init">

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

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

div.test
{
white-space:nowrap;
max-width:12em;
overflow:hidden;

}

div.slider {
display: none;
}

table.dataTable tbody td.no-padding {
padding: 0;
}

</style>
<script type="text/javascript" language="javascript" src="media/js/jquery.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="examples/resources/syntax/shCore.js"></script>
<script type="text/javascript" language="javascript" src="examples/resources/demo.js"></script>
<script type="text/javascript" language="javascript" class="init"><!--

function format ( d ) {

      return '<div class="slider">'+ 
    '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;background-color:#FFFFFF;">'+
    '<tr>'+
    '<td>Company Name:</td>'+
    '<td>'+d.companyname+'</td>'+
'</tr>'+
        '<tr>'+
        '<td>Website:</td>'+
        '<td>'+d.website+'</td>'+ 
    '</tr>'+
    '<tr>'+
    '<td>Facebook Page:</td>'+
    //'<td>And any further details here (images etc)...</td>'+
     '<td>'+d.facebookpage+'</td>'+
'</tr>'+

'</table>'+
'</div>';
}

$(document).ready(function() {
var dt = $('#example').DataTable( {
"scrollY": "",
"processing": true,
"serverSide": true,
"lengthMenu": [ 25 ],
"dom": '<"top"f>rt<"bottom"ip><"clear">',
"language": {
"search": "Global Search"
},
"ajax": "examples/server_side/scripts/companyindex-ids-objects.php",
"columns": [
{
"class": "details-control",
"orderable": false,
"data": null,
"defaultContent": ""
},
{ "data": "companyname" }, //1
{ "data": "website" },
{ "data": "countryname" },
{ "data": "statename" },
{ "data": "cityname" },
{ "data": "companyno" }

    ],
     "columnDefs": [
                    {

                        "render": function ( data, type, row ) {
                        return '<div class="test" style="text-overflow:ellipsis;">'+'<a href="' + data + '"rel="nofollow">' + data + 

'</a>'+'</div>';
},
"targets": 2
},
{
"targets": [ 6 ],
"searchable": false,
"visible": false
}
],
"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
        $('div.slider', row.child()).slideUp( function () {
            row.child.hide();
            tr.removeClass('shown');
        } );
    }
    else {
        // Open this row
        row.child( format(row.data()), 'no-padding' ).show();
        tr.addClass('shown');

        $('div.slider', row.child()).slideDown();
    }
} );

} );

</script>

</head>

<body>

<div class="container">
              <table id="example" class="display" cellspacing="0" width="100%"> 
            <thead>
                <tr>
                    <th></th>
                    <th>Company</th>
                    <th>Website</th>
                    <th>Country</th>
                    <th>State</th>
                    <th>City</th>
                    <th>Company No</th>
                </tr>
            </thead>


        </table>

</div> <!-- container tag is closed here -->

</body>
</html>

companyindex-ids-objects.php

<?php

// DB table to use
$table = 'company';
$sJoin ='inner join country on country.id = company.country inner join state on state.id = company.state inner join city on city.id =

company.city inner join companytype on companytype.id = company.companytype inner join zone on zone.id = company.industrial';

// Table's primary key
$primaryKey = 'idcompany';

$columns = array(
array(
'db' => 'idcompany',
'dt' => 'DT_RowId',
'formatter' => function( $d, $row ) {
return 'row_'.$d;
}
),
array( 'db' => 'companyname', 'dt' => 'companyname'),
array( 'db' => 'website', 'dt' => 'website'),
array( 'db' => 'countryname','dt' => 'countryname'),
array( 'db' => 'statename','dt' => 'statename'),
array( 'db' => 'cityname','dt' => 'cityname')
);

// SQL server connection information
$sql_details = array(
'user' => 'root',
'pass' => 'mynew2014',
'db' => 'editordatabase',
'host' => 'localhost'
);

require( 'ssp1.class.php' );

echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns,$sJoin)
);

Here is the live example

http://dir.vkinfotek.com/animationcompanyindex.html

Your help is appreciated

This discussion has been closed.