FixedColumns & bJQueryUI true not playing niceley togther
FixedColumns & bJQueryUI true not playing niceley togther
bensdb
Posts: 30Questions: 4Answers: 0
Hi.
I can get fixed columns and themes working independantly of eachother however when trying to use them together i have problems.
When I try to search to filter the table, it collapses as it should to show matches, but the fixed columns don't. The following example demonstrates this behaviour:
http://datatables.net/release-datatables/extras/FixedColumns/themed.html.
I want it to collapse with the rest of the table, so have done some googling and came across a couple of threads saying to use the FixedColumns nightly JS.
I included both the fixedcolumn nightly and the datatables nightly instead of the originals and for some reason fixedcolumn stops working altogether.
Any ideas what's going on? html below - sorry if its a bit of a mess:
[code]
<?php
$con = mysql_connect("localhost","root", "");
if(!$con){
die("Error: ".mysql_error());
}
mysql_select_db("oxtongateway", $con);
$result = mysql_query("SELECT * FROM gateway");
?>
<!DOCTYPE html>
DataTables
@import "datatables/media/css/demo_table_jui.css";
@import "datatables/media/themes/css/smoothness/jquery-ui-1.10.4.custom.css";
@import "datatables/extras/ColVis/media/css/ColVis.css";
@import "datatables/extras/TableTools/media/css/TableTools.css";
@import "datatables/extras/FixedColumns/media/css/FixedColumns.css";
body {
font-family: 'Open Sans', 'sans-serif';
font-size: 12px;
}
th, td { white-space: nowrap; }
.container {width:80%; margin:0 auto;}
#top {height:100px;}
.ColVis {display:inline; float:left;}
$(document).ready(function(){
var oTable=$('#datatables').dataTable({
"sScrollY": 500,
"sScrollX": "300px",
"bScrollCollapse": true,
"bJQueryUI": true,
"bPaginate": false,
//Show/Hide Cols
"sDom": '<"H"TClfr>t<"F"ip>',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 13,14,15,16,17 ] }
],
"oColVis": {
"activate": "mouseover",
"bRestore": true,
"sAlign": "left",
"aiExclude": [ 0,1,2,3 ]
},
//End Show/Hide Cols
});
new FixedColumns( oTable, {
"iLeftColumns": 4
});
});
//Fix for table overflowing and therefore stopping horzontal scroll
table=$("#datatables").dataTable();
table.wrap('');
Master Database
ID
Title
First Name
Surname
Home Phone
Mobile Phone
Email
House Number
Road Name
Town
Postcode
Gender
Date of Birth
Sexual Orientation
Religion
Disability
Ethnicity
Date Added to System
<?php
while($row = mysql_fetch_array($result)) {
?>
<?=$row['id']?>
<?=$row['title']?>
<?=$row['first']?>
<?=$row['last']?>
<?=$row['home']?>
<?=$row['mobile']?>
<?=$row['email']?>
<?=$row['house']?>
<?=$row['road']?>
<?=$row['town']?>
<?=$row['postcode']?>
<?=$row['gender']?>
<?=$row['dob']?>
<?=$row['sexual']?>
<?=$row['religion']?>
<?=$row['disability']?>
<?=$row['ethnicity']?>
<?=$row['dateadded']?>
<?php
}
?>
[/code]
I can get fixed columns and themes working independantly of eachother however when trying to use them together i have problems.
When I try to search to filter the table, it collapses as it should to show matches, but the fixed columns don't. The following example demonstrates this behaviour:
http://datatables.net/release-datatables/extras/FixedColumns/themed.html.
I want it to collapse with the rest of the table, so have done some googling and came across a couple of threads saying to use the FixedColumns nightly JS.
I included both the fixedcolumn nightly and the datatables nightly instead of the originals and for some reason fixedcolumn stops working altogether.
Any ideas what's going on? html below - sorry if its a bit of a mess:
[code]
<?php
$con = mysql_connect("localhost","root", "");
if(!$con){
die("Error: ".mysql_error());
}
mysql_select_db("oxtongateway", $con);
$result = mysql_query("SELECT * FROM gateway");
?>
<!DOCTYPE html>
DataTables
@import "datatables/media/css/demo_table_jui.css";
@import "datatables/media/themes/css/smoothness/jquery-ui-1.10.4.custom.css";
@import "datatables/extras/ColVis/media/css/ColVis.css";
@import "datatables/extras/TableTools/media/css/TableTools.css";
@import "datatables/extras/FixedColumns/media/css/FixedColumns.css";
body {
font-family: 'Open Sans', 'sans-serif';
font-size: 12px;
}
th, td { white-space: nowrap; }
.container {width:80%; margin:0 auto;}
#top {height:100px;}
.ColVis {display:inline; float:left;}
$(document).ready(function(){
var oTable=$('#datatables').dataTable({
"sScrollY": 500,
"sScrollX": "300px",
"bScrollCollapse": true,
"bJQueryUI": true,
"bPaginate": false,
//Show/Hide Cols
"sDom": '<"H"TClfr>t<"F"ip>',
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ 13,14,15,16,17 ] }
],
"oColVis": {
"activate": "mouseover",
"bRestore": true,
"sAlign": "left",
"aiExclude": [ 0,1,2,3 ]
},
//End Show/Hide Cols
});
new FixedColumns( oTable, {
"iLeftColumns": 4
});
});
//Fix for table overflowing and therefore stopping horzontal scroll
table=$("#datatables").dataTable();
table.wrap('');
Master Database
ID
Title
First Name
Surname
Home Phone
Mobile Phone
House Number
Road Name
Town
Postcode
Gender
Date of Birth
Sexual Orientation
Religion
Disability
Ethnicity
Date Added to System
<?php
while($row = mysql_fetch_array($result)) {
?>
<?=$row['id']?>
<?=$row['title']?>
<?=$row['first']?>
<?=$row['last']?>
<?=$row['home']?>
<?=$row['mobile']?>
<?=$row['email']?>
<?=$row['house']?>
<?=$row['road']?>
<?=$row['town']?>
<?=$row['postcode']?>
<?=$row['gender']?>
<?=$row['dob']?>
<?=$row['sexual']?>
<?=$row['religion']?>
<?=$row['disability']?>
<?=$row['ethnicity']?>
<?=$row['dateadded']?>
<?php
}
?>
[/code]
This discussion has been closed.
Replies
Let me know if that works or not!
Allan