DataTables 1.7 beta 5 released
DataTables 1.7 beta 5 released
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
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
This discussion has been closed.
Replies
You are The Man!
UPDATE:
I noticed that setting sWidth for column [code]{"sWidth": "140px"},[/code] does nothing.
Regards,
Lukasz
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.
@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
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
Regards,
Allan
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?
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
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
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
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]
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"
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
nTh.style.width = oSettings.aoColumns[i].sWidth;
[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! :) )
[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.
@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
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
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!
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
Thanks for the quick response,
Drew
Allan
Allan
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]
http://s936.photobucket.com/albums/ad201/dwaddell_photos/?albumview=slideshow
Regards,
Allan
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.