DataTables 1.7 beta 4 released

allan

Hello all,

After a lot of beta testing (thank you to everyone who has taken part are reported issues back to me!) and a lot of work on this new release, the next beta version of DataTables 1.7 is now available. I have high hopes that we are now not far aware from a stable 1.7.0 release, so please do continue to test and let me know of any problems!

New in this release:

- Significantly improved alignment of columns when scrolling the tables
- sScrollXInner is a new initialisation property which allows you to specify the width of the table inside the scroller (this in instead of setting the width of the table to be too width)
- Data is automatically trimmed when read in, which makes data type detection that little bit easier
- HTML type columns are now automatically detected
- A number of bug fixes, optimisations and stabilisations

Thanks again to everyone who has helped to contributed to make this release possible. I'm really proud of where DataTables is going, and the superbly helpful community that we have here. I've still got lots of ideas for the future of DataTables, so plenty more to come after 1.7's release, if not necessarily in the core... :-)

As always:
Full release notes: http://datatables.net/download .
Download 1.7 beta 4 directly: http://datatables.net/releases/dataTables-1.7.beta.4.zip

And of course, if you are finding DataTables useful for your job, or whatever you are using it for, please consider donating so I can keep supporting and developing DataTables: http://datatables.net/donate :-)

Regards,
Allan

kevinliu

Allan,

I just tried the beta4, and found something like a bug. It's similar to the issue mentioned on http://datatables.net/forums/comments.php?DiscussionID=2221&page=1. It happened to me when I change page length from 10 to 25, then back to 10, update datatable value, then click the next button, then I got a javascript error: "j is undefined' in line [code]var j = a.ao...j++) o == a.aoOpenRows[j].nParent && [/code]. I use dom data resource.

I tried to track the error in the script then found when a._iDisplayStart or a._iDisplayEnd should have a value of 10, they are set to '010'. This causes some if conditions containing these two variables have wrong value. I can see "Showing 1 to 010 of 29 entries".

I found a piece of code probably responsible for the wrong a._iDisplayEnd value. In C(a) function, when a._iDisplayStart = 10, a._iDisplayLength =10, a.aiDisplay.length = 29, the following code is supposed to deliver 20, but it delivers 29, since it gets value 010 from "a._iDisplayStart+a._iDisplayLength"

[code]a._iDisplayStart+a._iDisplayLength>a.aiDisplay.length||a._iDisplayLength==-1?a.aiDisplay.length:a._iDisplayStart+a._iDisplayLength[/code]

Thanks,
Kevin

allan

Hi Kevin,

Interesting one! Thanks for posting about it - I completely missed the earlier thread you pointed out! This would occur if either _iDisplayStart or _iDisplayLength is a string rather than a number - which shouldn't be the case... Do you have any custom initialisation code being used, or is it just a straight forward $(...).dataTable(); ?

Thanks,
Allan

allan

I've just noticed that the package I put up for 1.7 beta 4 originally had a 'beta 3' tag in the comment of the minified version (the non-minified one was correct). I've put a new package which corrects this error, but someone you who downloaded this package already may have an incorrect comment there. The code is version 1.7 beta 4, it's just the comment that is wrong as a result of a packaging error.

Regards,
Allan

kkudi

Hi Allan,

The alignment issue I have posted on with an attachment back in a previous post has not been fixed by beta 4.

Although I have noticed stability when scrolling vertically with regards to the column headers, the alignment in the cells for the last columns is still bad.

See picture to remember issue :

http://img191.imageshack.us/img191/5972/alignmentissue.jpg

Thanks
Andreas

kkudi

Also, when a table is initialized with no data, but with column headers, the scroll bar ( horizontal is not visible).

When data is added, scrollbar is visible. Is this a bug?

allan

Hi kkudi,

Can you post a link with an example that has the column widths not working please? It would be good to have example data for what is causing this to fail, as it has worked in the various test cases I've thrown at it.

With regard to the second part - possibly... Have you set sScrollXInner to be greater than the width of the scrolling container? Again a link would be useful.

Allan

kkudi

Hi Allan,

I have sent you a msg via datatables.net/contact.

kkudi

Have sent the information you requested Allan.

Thanks
Andreas

dzida

Unfortunetly I also face the problem with columns alignment in my code.

Here is the code I use:
[code]
oTable = $('#myTable').dataTable( {
"oLanguage": {
"sUrl": "/site_media/language/pl_PL.txt"
},
"sDom": 'T<"clear"><"fg-toolbar ui-widget-header ui-corner-tl ui-corner-tr ui-helper-clearfix"lfr>t<"fg-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"ip>',
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"sScrollX": "100%",
"bScrollCollapse": true,
"bJQueryUI": true,
"sAjaxSource": "/data",
"aoColumns" : [
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
{ "bSortable": false },
{ "bSortable": false },
{ "bSortable": false }
]
} );
[/code]

and here is the result: http://yfrog.com/05datatablesbugp

I've tried to set sScrollXInner - columns are aligned fine in this case but there is no scrollbar visible.

UPDATE:
I've also noticed related issue (I think so at least:)). Setting custom width to column ({"sWidth": "200px"}) looks fine on an empty table. After data is retrieved from server given width is lost and table looks like on example I posted previously. Looks like there is something broken with methods related to drawing table for bServerSide:true.

kevinliu

Allan,

I am following the "a._iDisplayStart and a._iDisplayEnd" issue I raised. I don't have custom initialisation, but have code to remove and recreate datatable, and I didn't use fndestroy function, it doesn't work for my ie7 for some reason, although works perfect in firefox. I paste my code as below:

[code]



var oTable;
var displayLength;
var displayStart;

$(function () {
refreshTable();
});

function refreshTable() {

// before creating a table, make sure it is not already created.
// And if it is, then remove old version before new one is created
if ($("#stakeholders")) {
// contains the dataTables master records
var s = $(document).dataTableSettings;

if (s != undefined) {
var len = s.length;
for (var i = 0; i < len; i++) {
// if already exists, remove from the array
if (s[i].sInstance = "stakeholders") {
s.splice(i, 1);
$("#stakeholders").siblings("#stakeholders_length").remove();
$("#stakeholders").siblings("#stakeholders_filter").remove();
$("#stakeholders").siblings("#stakeholders_info").remove();
$("#stakeholders").siblings("#stakeholders_paginate").remove();
$("#stakeholders").unwrap();
}
}
}
}

//initial 10 records each page
if (displayLength == undefined) {
displayLength = 10;
}
if (displayStart == undefined) {
displayStart = 0;
}

oTable = $('#stakeholders').dataTable(
{ "iDisplayLength": displayLength,
"iDisplayStart": displayStart
}
);

var nNodes = oTable.fnGetNodes();
if (nNodes.length < displayStart) {
displayStart = nNodes.length;
}
setDataTableControlEvents();
}

function setDataTableControlEvents() {

$("#stakeholders_length").change(function () {

displayLength = $("#stakeholders_length option:selected").text();
if (displayStart < displayLength) {
displayStart = 0;
}
else if (displayStart % displayLength != 0) {
displayStart = Math.abs(displayStart / displayLength) * displayLength;

}
})
$("#stakeholders_previous").click(function () {
if (parseInt(displayStart) >= parseInt(displayLength)) {
displayStart = parseInt(parseInt(displayStart) - parseInt(displayLength));
}
else {
displayStart = 0;
}
})
$("#stakeholders_next").click(function () {
displayStart = parseInt(displayStart) + parseInt(displayLength);
})
}





......



[/code]

I am using asp.net mvc ajax to update the "stakeholders" div.

Thanks,
Kevin

kevinliu

Allan,

If I use fnDestroy function, my code becomes like following:

[code]



var dataTable;

$(document).ready(function () {
dataTable = $('#stakeholders').dataTable();
});

function refreshTable() {
var displayStart = dataTable.fnSettings()._iDisplayStart;
var displayLength = dataTable.fnSettings()._iDisplayLength;
var sorting = dataTable.fnSettings().aaSorting;

dataTable.fnDestroy();
dataTable = $('#stakeholders').dataTable({
"iDisplayStart": displayStart,
"iDisplayLength": displayLength,
"aaSorting": sorting
});

}



[/code]

It works fine in Firefox, but in my ie7, Javascript error "'className' is null or not an object" will pop up when I update "stakeholders" div with ajax. I have cleared browser cache.

allan

Issue: Scrolling alignment - thanks for all of the information provided about this! It's made it much easier to track down what is going on and I believe I understand the issue quite well now. A new beta will be forthcoming, hopefully fairly soon, which will address this.

Issue: _iDisplayStart as a string - to narrow down the issue, it would be interesting to know if it is the start or end number which is typed as a string. Could you add 'console.log( typeof a._iDisplayStart, typeof a._iDisplayLength );' into the code where the error be being triggered. I can't see anywhere in DataTables that this type error would occur, but then I don't see it on a quick scan of your code either. I presume you can't reproduce the issue without your DataTables manipulation code?

Issue: fnDestroy - I knew I'd forgot something. Sorry. I'll fire up a copy of IE7 before making the next beta release which will then address this. You could pass '"bDestory":true' as an initialisation parameter, rather than calling fnDestroy yourself - same effect.

Allan

kkudi

Allan, with regards to the horizontal scroll bar visibility when there's no data, I have also found that using "sScrollXInner" solves the problem and spaces out the columns accordingly.

The alignment issue is not eliminated but it's somehow improved. ( by using "sScrollXInner")

allan

@kevinliu: I think I've just realised what the problem is that you are seeing with the '010' issue. Your displayLength variable is a string, not a number:

[code]
displayLength = $("#stakeholders_length option:selected").text()
[/code]
It needs a parseInt() on it. So not an issue with DataTables thankfully :-). There is however the issue about fnDestroy which I'm just looking at.

Allan

allan

@kevinliu: I've been unable to reproduce the error with fnDestroy unfortunately. It appears to work exactly as expected for me in IE6, 7 and 8. If you have the IE Javascript debugger available, it would be very useful to know what which point in the code it is breaking.

Allan

allan

@all:

Beta 5 is now available - which will hopefully address the scrolling alignment issue: http://datatables.net/forums/comments.php?DiscussionID=2293

Allan

kevinliu

Hi Allan,

Thanks for pointing out the error for the "010" issue. After I Parseint() it, it works now. I am also confused with my ie7 issue, will have a check on other machine later.

Regards,
Kevin

taelor

Hey Allan,

Thanks for the speedy reply on the visible columns issues regarding strings vs. ints.

I do have another question. I am upgrading our datatables from version 1.5.6 to the new beta 4 and have noticed some considerable amount of slow down when hiding/showing columns dynamically. Well actually the hide is just fine, its the reshowing of that data that I get a Unresponsive Script warning. I have two exact same sets of data in two different tables (one using 1.5.6 the other 1.7b4).

the only difference in the code I can find (I dont know if this is new for 1.7) is...

NEW
[code]
oSettings.aoData[i].nTr.insertBefore( nTd, $('>td:eq('+iBefore+')', oSettings.aoData[i].nTr)[0] );
[/code]

OLD
[code]
oSettings.aoData[i].nTr.insertBefore( nTd, oSettings.aoData[i].nTr.getElementsByTagName('td')[iBefore] );
[/code]


one thing I will say is that we are using jQuery 1.3.something, which could be the problem (I know they dramatically improved the internals for the selectors right?)

but I do know that its always faster to just use straight up javascript when possible as opposed to jQuery selectors. Now I am unfamiliar with the '>td:eq(x)' syntax, does that mean, "give me all the td's greater than the ones equal to this one with the id of x?"

got any suggestions?

taelor

btw, mokey patching to the old style of code definitely fixes the problem

taelor

and so does upgrading to jQuery 1.4.2

I would definitely suggest upgrading to 1.4.2 if going to the new datatables. $)

allan

Hi taelor,

Good to hear that moving to jQuery 1.4.2 does the trick for you. I'd have been reluctant to go back to the old way of doing it as the new method takes sub-tables into consideration, where as the old one would get things horribly wrong if you had nested tables, and used this method. The getElementsByTagName could return nodes from the nested table, and then DataTables would remove that.

So - upgrading to jQuery 1.4.2 is the way to go :-)

Regards,
Allan