drill down rows breaks filtering and sorting
drill down rows breaks filtering and sorting
asdrubal
Posts: 16Questions: 0Answers: 0
Hello
I'm trying to implement datatables with drill down rows and tabs. The problem is that it break sorting and filtering.
Can't find what's the problem as the code is just copied from the exapmles. Can you please have a look.
Here is debugging link:
http://debug.datatables.net/umufey
And full code:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
@import "DataTables/media/css/demo_page.css";
@import "DataTables/media/css/demo_table.css";
@import "DataTables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
.ui-tabs .ui-tabs-panel { padding: 10px }
div.innerDetails { display: none }
$(document).ready(function() {
var anOpen = [];
var sImageUrl = "/DataTables/examples/examples_support/";
var oTable = $('#example').dataTable( {
"bPaginate": true,
"bJQueryUI": true,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null }
]
} );
$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} );
} );
function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
''+
''+
'Rendering engine:'+oData.engine+''+
'Browser:'+oData.browser+''+
'Platform:'+oData.platform+''+
'Version:'+oData.version+''+
'Grade:'+oData.grade+''+
''+
'';
return sOut;
}
$(function () {
$("#tabs").tabs({ selected: 0 });
});
Members
<?php
$con = mysql_connect("localhost", "root", "******");
if (!$con) {
die("Error: " . mysql_error());
}
mysql_select_db("schneider", $con);
$result = mysql_query("SELECT * FROM members JOIN pracownik on (members.login=pracownik.other2)");
?>
Member ID
Username
Name
Surname
Access Level
Action
Member ID
Username
Name
Surname
Access Level
Action
<?php
while ($row = mysql_fetch_array($result)) {
?>
<?php echo $row['member_id']; ?>
<?php echo $row['login']; ?>
<?php echo $row['imie']; ?>
<?php echo $row['nazwisko']; ?>
<?php echo $row['security']; ?>
 
<?php
}
echo "";
echo "";
mysql_close($con); ?>
<?php
if ($member_group == "admin" || $member_group == "tl" )
echo "";
?>
[/code]
I'm trying to implement datatables with drill down rows and tabs. The problem is that it break sorting and filtering.
Can't find what's the problem as the code is just copied from the exapmles. Can you please have a look.
Here is debugging link:
http://debug.datatables.net/umufey
And full code:
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
@import "DataTables/media/css/demo_page.css";
@import "DataTables/media/css/demo_table.css";
@import "DataTables/examples/examples_support/themes/smoothness/jquery-ui-1.8.4.custom.css";
.ui-tabs .ui-tabs-panel { padding: 10px }
div.innerDetails { display: none }
$(document).ready(function() {
var anOpen = [];
var sImageUrl = "/DataTables/examples/examples_support/";
var oTable = $('#example').dataTable( {
"bPaginate": true,
"bJQueryUI": true,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null },
{ "mDataProp": null }
]
} );
$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );
if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
var nDetailsRow = oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
$('div.innerDetails', nDetailsRow).slideDown();
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
$('div.innerDetails', $(nTr).next()[0]).slideUp( function () {
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
} );
}
} );
} );
function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
''+
''+
'Rendering engine:'+oData.engine+''+
'Browser:'+oData.browser+''+
'Platform:'+oData.platform+''+
'Version:'+oData.version+''+
'Grade:'+oData.grade+''+
''+
'';
return sOut;
}
$(function () {
$("#tabs").tabs({ selected: 0 });
});
Members
<?php
$con = mysql_connect("localhost", "root", "******");
if (!$con) {
die("Error: " . mysql_error());
}
mysql_select_db("schneider", $con);
$result = mysql_query("SELECT * FROM members JOIN pracownik on (members.login=pracownik.other2)");
?>
Member ID
Username
Name
Surname
Access Level
Action
Member ID
Username
Name
Surname
Access Level
Action
<?php
while ($row = mysql_fetch_array($result)) {
?>
<?php echo $row['member_id']; ?>
<?php echo $row['login']; ?>
<?php echo $row['imie']; ?>
<?php echo $row['nazwisko']; ?>
<?php echo $row['security']; ?>
 
<?php
}
echo "";
echo "";
mysql_close($con); ?>
<?php
if ($member_group == "admin" || $member_group == "tl" )
echo "";
?>
[/code]
This discussion has been closed.
Replies
What breaks down? It does not work at all? It gives unexpected results? What do you expect and what do you get?
Here is a link to table in case someone wants to have a look:
http://testkrystian.cba.pl/testbase/index.php?go=members