DataTables
Advanced interaction
features for your tables.
Editor
Comprehensive editing
library for DataTables.
Manual
Download
≡ Show site navigation

FixedColumns 3.0.0 problem with ie7

FixedColumns 3.0.0 problem with ie7

PiyachaiPiyachai Posts: 5Questions: 0Answers: 0
edited July 2014 in Plug-ins
I'vs tested FixedColumns v1, v2, v2.5 and v3. I've a problem that I cannot fixed left and right columns and x-axel scroll bar in the middle columns with a y-axel scroll bar for the all of the columns with v1 and v2. Next, with v2.5 I can but the scroll bar appear between the middle table which can scroll in x-axel and the right fixed column, so I changed version to v3.

In v3, It is good on firefox and chrome but I get an error in ie - I've test in ie7 and ie9. The error is the variable iLeftWidth in function "_fnGridLayout" don't have value, so when it go to "oGrid.left.wrapper.style.width = iLeftWidth+"px";", it will get error.

There is no problem in firefox and chrome. The iLeftWidth has the value and no error in result.

Can I do something about that?

This is my code for v3.
My css and js files are all in the js folder of DataTables-1.9.4 folder.
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

testdoc





$(document).ready(function() {
var table = $('#example').DataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"scrollX": true,
"scrollCollapse": true,
"paging": false
} );

new $.fn.dataTable.FixedColumns( table, {
"iLeftColumns": 1,
"iRightColumns": 1
} );
} );






th, td { white-space: nowrap; background-color:#ffffff; }
div.dataTables_wrapper {
width: 800px;
margin: 0 auto;
}




Live example




First name
Last name
Position
Office
Age
Start date
Salary
Extn.
E-mail





Tiger
Nixon
System Architect
Edinburgh
61
2011/04/25
$3,120
5421

...




[/code]

Replies

  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin
    Can you link to a page showing the problem please? My demo pages seem to work okay in IE as far as I can tell.

    Allan
  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin
    Oh - btw - I'd suggest removing sScrollXInner . I should never have put that in... Just let the browser decide how much scrolling is needed.

    Allan
  • PiyachaiPiyachai Posts: 5Questions: 0Answers: 0
    edited February 2014
    Thank you so much for helping me.

    Firstly, I don't have any link to my page because I just work on my local network to test the coding. I am sorry. But I use that code only with the js and css file form the datatable plugin, fixed column plugin and jQuary.js and put them all in one folder to make it work in my simplest way - I am kinda stupid at finding path.

    Secondly, I did as you ask me to remove sScrollXInner but the table became not width enough to show x-axel scroll bar, so I type some data longer and manage to make it has x-axel scroll bar in the end. However, the result is the same. I still get the error on my ie but everything work fine in firefox.

    Lastly, I already figured out the problem. When the code say
    [code]iWidth += parseInt( $(that.s.dt.nTable).css('border-left-width'), 10 );[/code]

    Firefox send value of $(that.s.dt.nTable).css('border-left-width') as 1px, so it can be parseInt to 1
    but
    ie send value as medium, so it cannot be parseInt and give NaN as the result, so the value give the error in the next stage.

    I think I can write the code like:
    [code]
    if ($(that.s.dt.nTable).css('border-left-width') == medium)
    iWidth += ?px;
    [/code]
    But I still not sure what ? should be and not sure it will work or not.
  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin
    edited February 2014
    > Secondly, I did as you ask me to remove sScrollXInner but the table became not width enough to show x-axel scroll bar

    Try: `th, td { white-space: nowrap; }` in your CSS.

    > Firefox send value of $(that.s.dt.nTable).css('border-left-width') as 1px, so it can be parseInt to 1
    but

    Wow - bloody IE... Very good find. There are probably thin and thick options that also need to be considered.

    Allan
  • PiyachaiPiyachai Posts: 5Questions: 0Answers: 0
    Sorry, that I cannot try your suggest to add [code]th,td { white-space:nowrap;}[/code] now because I forgot to bring my labtop back home. I will try this on Monday.
    However, I still think the main problem is the medium value that cause me the error. I've try to do [code]iWidth += 4px;[/code] and some other value but the table became ugly. It had x-axel scroll bar at the bottom of the fixed columns both left and right and the left fixed column just float above the table around 1 row high. Every number that I used, didn't change the ugly points of the table. The number can just change the width of the fixed columns but the scroll bar and the float left fixed column still were the same.
  • PiyachaiPiyachai Posts: 5Questions: 0Answers: 0
    edited February 2014
    I've added new css name my.css which I added [code] th, td { white-space:nowrap; } [/code] in it and remove the same code from my html page. The result was the same as before and I don't think this code can do the trick.

    The other thing, I've just tested the $(that.s.dt.nTable).css('border-left-width') more and I saw the different value between ie and firefox as these:
    [code]
    for ie
    $(that.s.dt.nTable).css('border-left-width') = medium
    $(that.s.dt.nTable).css('border-right-width') = medium
    $(that.s.dt.nTable).css('border-top-width') = medium
    $(that.s.dt.nTable).css('border-bottom-width') = medium

    but for firefox
    $(that.s.dt.nTable).css('border-left-width') = 1
    $(that.s.dt.nTable).css('border-right-width') = 0
    $(that.s.dt.nTable).css('border-top-width') = 0
    $(that.s.dt.nTable).css('border-bottom-width') = 0
    [/code]

    Lastly, I paste pictures of my table in my google site to show you.
    There are pictures of my table in ie and in firefox.
    In ie, you will see my red draws which I want to show you three things.
    First, the left column is float above the other columns about 1 row.
    Second, there are the x-axel scroll bar at the bottom of left and right fixed columns.
    Third, the last row of right fixed column cannot be seen because of the scroll bar.
    In firefox, I just want to show that the table is correct and I want the table to be like that.
    Please go to this link.
    https://sites.google.com/site/quarbigon/usage

    I want to paste the real table in the google site but I don't know how to write the jQuery path, datatable path and plugin path in the google site html code.
    Or you could suggest me which another website can I post this table to show you.
  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin
    JSFiddle or http://live.datatables.net might work

    I see the problem with the `medium` issue - I just need to find the time to fix it in the code, and I've not yet found that time - sorry.

    Allan
  • TOHTOH Posts: 2Questions: 0Answers: 0
    Allan, just checking in for status on the fix for this issue. In my case, IE8, FixedColumns-3.0.0, DataTables-1.9.4, jquery-1.11.0, jquery-ui-1.10.4.

    Many thanks to you. I am very grateful for your efforts!
  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin
    Should be fixed now in the 3.0.1-dev version of FixedColumns: http://datatables.net/download .

    Allan
  • TOHTOH Posts: 2Questions: 0Answers: 0
    Fixed confirmed! Many thanks Allan!!
  • PiyachaiPiyachai Posts: 5Questions: 0Answers: 0
    Thank you for your help and I hope this help a lot of people too.
  • HighlanderHighlander Posts: 5Questions: 0Answers: 0

    I still have the problem:

    <link rel="stylesheet" type="text/css" href="css/demo_table_jui.css" />
    <link rel="stylesheet" type="text/css" href="css/jquery-ui.1.10.03.css" />
    <link rel="stylesheet" type="text/css" href="media/css/TableTools_JUI.css" />
    <link rel="stylesheet" type="text/css" href="css/dataTables.fixedColumns.css" />

    <script type="text/javascript" language="javascript" src="scripts/jquery.1.11.js"> </ script>
    <script type="text/javascript" language="javascript" src="scripts/jquery.dataTables.1.9.4.js"> </ script>
    <script type="text/javascript" language="javascript" src="scripts/jquery.dataTables.fixedColumns.js" charset="utf-8" > </ script>
    <script type="text/javascript" language="javascript" src="media/js/jquery-ui.js"> </ script>
    <script type="text/javascript" language="javascript" src="media/js/TableTools.js" charset="utf-8" > </ script>

    ...
    new $ . fn.dataTable.FixedColumns ( otable , {
    " iLeftColumns ": 2 }) ;
    ...

    In IE, second scrollbar is visible, but in FF OK!
    What am I doing wrong ?

    FixedColumns - 3.0.2 -dev , DataTables - 1.9.4 , jquery- 1.11.0

  • HighlanderHighlander Posts: 5Questions: 0Answers: 0

    Hi Allen,

    what is my mistake or what I'm doing wrong...
    urgent help...

    thank you

  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin

    Please link to a test case showing the issue.

    Allan

  • HighlanderHighlander Posts: 5Questions: 0Answers: 0

    Hi Allen,
    unfortunately does not go ...
    The application is within the company and not by the WEB accessible ..
    unfortunately you can not set a picture!
    what we do now

  • HighlanderHighlander Posts: 5Questions: 0Answers: 0

    just as bad in IE 7 & 8

    http://datatables.net/release-datatables/extensions/FixedColumns/examples/right_column.html

  • allanallan Posts: 63,488Questions: 1Answers: 10,467 Site admin

    Thanks for the link. In IE7, the right column has a scrollbar at the bottom of the right fixed column (IE8 doesn't show that problem for me). Is that also what you are seeing?

    I'll try to make some time to fix that as IE7 should be supported for the current release of FixedColumns - although support for IE6/7 will be dropped in the next major release.

    Allan

  • HighlanderHighlander Posts: 5Questions: 0Answers: 0

    Thanks, that is exactly what see ish ...
    IE 8 to IE 10 also, IE 11 is OK

This discussion has been closed.

DataTables

DataTables designed and created by SpryMedia Ltd.
© 2007-2023 MIT licensed. Privacy policy. Supporters.
SpryMedia Ltd is registered in Scotland, company no. SC456502.