DataTables 1.7 beta 5 released

allan

Hello all,

Following on from the release of 1.7 beta 4 a few days ago, an issue with column alignment was brought to light, which this update will hopefully address. This is the only change in this release - but it is worth noting that as part of this change, DataTables will now show a warning (console.log - only if it's available) if the requirements aren't met for the scrolling to occur correctly (i.e. column will be misaligned).

As per usual:
Full release notes: http://datatables.net/download .
Download 1.7 beta 5 directly: http://datatables.net/releases/dataTables-1.7.beta.5.zip
Donate to help keep DataTables supported: http://datatables.net/donate :-)

Regards,
Allan

dzida

Works like a charm for me:)

You are The Man!

UPDATE:
I noticed that setting sWidth for column [code]{"sWidth": "140px"},[/code] does nothing.

Regards,
Lukasz

xp314a

Just found your site just a few days ago, and this is a very nice app. Excellent work, keep it up.

FYI, I found one tiny bug with the x scrolling in beta5. If you're using a javascript array to build the table with sScrollXInner set, IE8 has an issue with an invalid argument (it doesn't affect FF). The offending line is 5051:

[code]nCalcTmp.style.width = oSettings.oScroll.sXInner + "px";[/code]

You can repoduce the error by modifying your example at examples/basic_init/scroll_x.html by emptying the table and adding the following to your config:

[code]
"aoColumns": [{"sTitle":"id"},{"sTitle":"email"},{"sTitle":"firstname"},{"sTitle":"lastname"},{"sTitle":"amount"},{"sTitle":"date"}],
"aData": [["133462","someone@somewhere.whatever","unprivileged","nobody","543.30","2010-07-05 17:05:49.064"],["133642","noeone@nowhere.whatever","privileged","somebody","453.30","2010-05-07 17:05:49.064"]]
[/code]

If you check the value of oSettings.oScroll.sXInner at runtime in this example, you get "110%." So you're effectively attempting to set nCalcTmp.style.width to "100%px."

You can correct this issue by simply changing the line to:

[code]nCalcTmp.style.width = oSettings.oScroll.sXInner;[/code]

I am unsure of what effect this might have in other situations, as I'm not all that familiar with the code.

I saw that the header/body sync issue from beta4 has been fixed, so it may be less of an issue. But setting the inner width stretches everything out and makes it look better IMHO.

Thanks for the great work you have done.

allan

@dzida - good to hear it works for the most part. Regarding the width issue - this is something that I honestly cannot explain at the moment. DataTables without a doubt applies the width as needed during it's calculations, but the browser simply ignores it. I can't understand why at this time, and the old work around I've find thus far is to put a 'div' with the required width into the table cells. This is something I'm going to be looking at more in the near future, but at the moment it's a limitation.

@xp314a - excellent point! The sScrollXInner property on initialisation should be able to take a number, a string without units or a string with CSS units. There are two places in the code where this is needed (in _fnScrollDraw as well) - I've used the following function to allow that:

[code]
function _fnStringToCss( s )
{
if ( typeof s == 'number' )
{
return s+"px";
}

if ( s.indexOf('em') != -1 || s.indexOf('%') != -1 || s.indexOf('ex') != -1
|| s.indexOf('px') != -1 )
{
return s;
}

return s+"px";
}
[/code]

This will be included in the next beta, or 1.7.0 if there are not major bugs found.

Regards,
Allan

xp314a

If you or anyone reading this is interested, I added the ability to send CSV and XLS files via email to TableTools and your modded version of ZeroClipboard.

I included a PHP file to handle the actual sending of the file server-side. But it could be set to post to any custom mail script. I removed some site-specific code from the PHP file and haven't tested it, so it may not be exactly right.

To use it, you simply provide TableTools with the email recipient and the URL of the mail script. And don't forget to add icons for the 2 new functions to the images folder. I named them sendcsv.png, sendcsv_hover.png, sendxls.png, and sendxls_hover.png in the included css file.

The sender email and SMTP information goes in the mailer script.

The Pastebin URLs for the modfied files and the PHP script are:

ZeroClipboard.as:
http://pastebin.com/yHid7iXE

TableTools.js:
http://pastebin.com/5btBrgb0

TableTools.css:
http://pastebin.com/NQeH5SbJ

send.php:
http://pastebin.com/byapLvjA

allan

@xp314a - nice one. Thanks for sharing :-)

Regards,
Allan

kkudi

Allan, thanks for the new beta release. It works like a charm now. No mis-alignments!

I don't know whether much can be done about it, but I have noticed that IE is terribly slow on fnDraw(true | false).

Is there anything that could improve re-drawing especially for IE7-8?

allan

Good to hear that I've finally got on top of the alignment issues :-) Thanks for the update.

I will certainly be looking at what can be done to optimise the drawing times, but I'm not aware of anything obvious at the moment. It depends basically on how much data there is and how much processing needs to be done (heavy sorting etc). If you have a demo you can post showing poor performance that will always be helpful.

Allan

iuliandum

Hi Allan,
Congratulations on your effort to align columns.
1. About vertical scrolling I think it is perfectly done. When the height of all rows exceeds the body table height, is displayed the vertically scrolling bar. It seems fantastic. See the example: http://i.imgur.com/bO1xn.jpg

I think that about horizontal scrolling there is a little more to do. It would be fantastic if horizontal scrolling would work as well as vertical scrolling. When the sum of columns width ("sWidth") exceeds table width ("sScrollX"), it would be great if the horizontal scroll bar would be displayed.

2. Aligning columns break when the table contains tfoot. See the below example:
http://i.imgur.com/WHk24.jpg

allan

Hi iuliandum,

1. I'm not sure I quite follow with the bit about the horizontal scrolling - could you explain it a little more? The scroll bar for x scrolling should only appear when there is actually x-scrolling needed. If the width of the table fits into the visible area, then there should be no scrolling - but there are a number of things which will effect it's visible area width.

2. Could you post your initialisation code please? I've just tried this with the following (based on my example) and it seems to work okay:

[code]
var oTable = $('#example').dataTable( {
"sScrollX": "100%",
"sScrollXInner": "110%",
"oLanguage": {
"sSearch": "Search all columns:"
}
} );
[/code]
One thing that would be of interest is if you are seeing any console.log() messages coming from DataTables? It should warn you if the table won't fit into a certain, given, area.

Regards,
Allan

iuliandum

Thanks for reply, Allan.

1. I will return with details.

2. Initialisation code is same like in multi_filter.html file from your examples.
[code]
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "110%",
"oLanguage": {
"sSearch": "Search all columns:"
}
} );

$("tfoot input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("tfoot input").index(this) );
} );
..................................................
$("tfoot input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );
} );
[/code]
and html table contain:
[code]









[/code]

RememberMe

I just upgraded from 1.6.2. I've made no changes other than using the new .min.js file. I'm now getting an error pulling up a grid that previously worked.

The error is here:
[code]if(a.aoColumns[b].bVisible){if(a.aoColumns[b].sWidth!==null)c.style.width=a.aoColumns[b].sWidth;[/code]

And the value of a.aoColumns[b].sWidth is "nullpx"

allan

Hi RememberMe,

Could you try it with the unminified file so we can pin point where in the code this error is occurring, so I can take a look at it? A straight upgrade like this should really work... :-)

Regards,
Allan

RememberMe

It's at line 2674

nTh.style.width = oSettings.aoColumns[i].sWidth;

Simon79

Same issue as RememberMe, but on line 2709, and it only seems to happen in IE (chrome\firefox seem ok):

[code]
nTh.style.width = oSettings.aoColumns[i].sWidth;
[/code]

EDIT: additional observation - after the error the datatable appears empty and has the "Please Wait" message... but if I enter something into the search box it then works.


(BTW, I love datatables, keep up the good work! :) )

Simon79

I seem to have come across an additional issue on the dataTable initialisation:

[code]$("#table").dataTable( { ...inputs... } );[/code]

on one of my pages. I get the following error with datatables 1.7 but none with 1.6:

[code]'events' is null or not an object[/code]

in jquery-1.4.2.min.js.

Yes, I know this is the Jquery file and not datatables, but it seems something in the way datatables 1.7 is working is causing this error, as it goes away if I revert to 1.6.

allan

@RememberMe and Simon79: I think I might know what is happening with the width issue, but I can't actually reproduce the issue, so I can't be 100% sure. Could you both possibly post your initialisation code so I can see what might be happening? Also are the tables hidden (i.e. display:none, or in a tab or something) when the table is initalised?

@Simon79: Interesting - I don't have a clue with this one! Could you post your initialisation code so I can see what the problem might be.

Many thanks,
Allan

sebumd

First off, Thanks so much for datatables! We'll be making a donation shortly after we launch this project live!

I'm not sure if this is an issue with just beta 5 but anyway, _fnAddData is extremely slow when adding to the DOM in IE7/8. It takes ~18 seconds to load the records.

The line [code] nTd.innerHTML = aData[i]; [/code]
If I comment that line out, everything executes quickly (6-7 seconds) in IE8. But I get nothing in my table :)
I'm fetching 5,000 records via Ajax. The page is all in a back end tool, so I can not show anything. Sorry! Does anyone have a solution for this one?!

Thanks!
-Scott

allan

Heh - yes commenting out the line that puts the data into the table would cause that :-). At 5'000 records I'd suggest looking at server-side processing. Is that an option The problem is that IE just has a very slow Javascript engine. It might be possible to take some of the work DataTables does "offline" - but that would require a bit of work.

Allan

sebumd

Allan,

Thanks for the quick response. We do have server side processing, but the client wants the ability to view "all" for exporting/printing purposes apparently.

Any ideas of a fix? I've already told them that it might not be possible to do it in less than 20 seconds anyway.

My animated gif spinner image stops playing. Can you think of a way to make it not "freeze"?

Thanks again!

dwaddell

Hi Allan,

Same things as everyone else, love DataTables.

In the beta 5 I am noticing two things with horizontal scrolling. The first is if you grab the scroll bar and move it around the table itself moves fine but it takes a second for the column headers to catch up. This only happens if you grab the scroll bar, if you hold on the arrows or continually click them it works fine. The second is if you scroll all the way to the right the columns and headers get misaligned.

Most of my stuff is done on the server side however I can describe what I am doing. I have 5 columns (1 is hidden) and here is what my initialization code would look like hard coded (minus aaData and aoColumns).

[code]
var oTable = $(#example).dataTable
(
{
"bJQueryUI" : true,
"sScrollX" : 100%,
"sScrollXInner" : 200%,
"sScrollY" : 200px,

"bInfo" : false,
"bFilter" : false,
"bAutoWidth" : false,
"bPaginate" : false,

"aoColumns" : o.aoColumns,
"aaData" : o.aaData
}
);
[/code]

Thanks again Allan.

allan

Sounds odd! What web-browser are you using? It seems okay in Firefox 3.6 and Safari 4. The one thing I have noticed about Firefox is that it can lag slightly when scrolling horizontally - it's just a little slower :-)

Allan

dwaddell

I am using Firefox 3.6.7 when I notice the horizontal scrolling issue. I only flip over to IE for testing and I hadn't done that in awhile so I just checked it out there and it works fine. My clients are not too technically so they will use what comes on the box so it working (not the right word as it works in Firefox too) in IE is much more important for me. The alignment issue however is in IE too; it's like it lets you scroll a little further than what you should be allowed.

Thanks for the quick response,
Drew

allan

Does the 'overscroll' occur for you in any of my demos: http://datatables.net/beta/1.7/examples/basic_init/scroll_xy.html (for example)? Are you able post a link so I can see the issue in action?

Allan

dwaddell

Unfortunately I don't have a spot where you can view the issue. I also do not see the issue in your examples so it's something past a simple setup has caused my issue. I may start stripping things out to see if I can figure out what settings is causing it. Maybe having the widths of the columns being a percentage? Each column has sWidth set to 25%. Or that there is a hidden column? Though I would assume that is just completely taken out of any calculations; just a stab in the dark.

allan

You are quite correct - the hidden column should not be included in the calculations. I've not experimented a huge amount with the scrolling and hidden columns, so it is possible there is an issue, but the scrolling really only should go as far as the table. Are you able to put up a screenshot showing the problem, or is the confidential information in the table?

Allan

dwaddell

Just playing around with some settings it appears like the issue is with increasing "sScrollXInner".

I do not see the 'overscroll' issue with
[code]
"sScrollXInner" : "110%",
[/code]

I do not see the 'overscroll' issue with
[code]
"sScrollXInner" : "150%",
[/code]

I do see the 'overscroll' issue with
[code]
"sScrollXInner" : "175%",
[/code]

I do see the 'overscroll' issue with
[code]
"sScrollXInner" : "200%",
[/code]

dwaddell

Give me a little while and I'll post some screen shots.

dwaddell

Here is a link to two graphics. This is where sScrollXInner is at 200%.

http://s936.photobucket.com/albums/ad201/dwaddell_photos/?albumview=slideshow

allan

Nice one! Thanks very much for that. I've managed to reproduce the issue as well with the 'oversizing'. I'll see what I can do about getting a fix into the next release.

Regards,
Allan

RememberMe

Sent you an email Allan, but wanted to post here for Simon79 and anyone having a similar issue. When I removed my hidden column, I no longer get the issue. However, the search functionality doesn't work at all.

But, removing the hidden column and using the 1.6.2 version gets rid of a display issue I was having with FixedHeaders and Search. As you entered characters into the search the Fixed Headers would properly resize with the columns. But, when you deleted the characters from the Search box, the Fixed Headers didn't properly resize to the column width and were drastically off. I had downloaded 1.7 to see if the issue was resolved there before I reported it. Seems to work now that the hidden column is gone.