Sliding child row not working for me
Sliding child row not working for me
bhar
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.
Replies
There is a Javascript error on the page if you look in the console:
Looks like you need to reference the DataTable correctly.
Allan