FixedColumns & bJQueryUI true not playing niceley togther

FixedColumns & bJQueryUI true not playing niceley togther

bensdbbensdb Posts: 30Questions: 4Answers: 0
edited April 2014 in FixedColumns
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]

Replies

  • allanallan Posts: 53,317Questions: 1Answers: 8,235 Site admin
    edited April 2014
    Change `new FixedColumns` to be `new $.fn.dataTable.FixedColumns` . The nightly removes the global variable.

    Let me know if that works or not!

    Allan
  • bensdbbensdb Posts: 30Questions: 4Answers: 0
    That worked great, Thanks!!!
This discussion has been closed.