DataTables 1.7 beta released - beta 4!

allan

Hello all,

*Update 30 May 2010*: DataTables 1.7 beta 2 has now been released.
*Update 12 June 2010*: DataTables 1.7 beta 3 has now been released.
* Update 12 July 2010*: DataTables 1.7 beta 4 has now been release - see http://datatables.net/forums/comments.php?DiscussionID=2279

It is with great pleasure that I can release DataTables 1.7 beta! A lot of work has been put into making DataTables more flexible and easier to work with for you the developer, and also adding a number of key new features which will be visible to the end user.

Main new features:
- True scrolling: http://datatables.net/beta/1.7/examples/basic_init/scroll_y_theme.html
- Column definitions: http://datatables.net/beta/1.7/examples/advanced_init/column_render.html
- DataTables object retrieval: http://datatables.net/beta/1.7/examples/api/regex.html

A full list of new features, descriptions and instructions on how to use them can be found here: http://datatables.net/new/1.7 . Furthermore, upgrade instructions are available here: http://datatables.net/upgrade/1.7 - for more applications 1.7 will be a drop in replacement, but check these notes if you run into any problems.

As well as new features, there are a number of bug fixes, updates and performance improvements. Full release notes: http://datatables.net/download .

Download 1.7 beta directly: http://datatables.net/releases/dataTables-1.7.beta.3.zip

If you are finding DataTables useful, please consider making a donation so I can continue to develop DataTables software like this 1.7 release: http://datatables.net/donate :-)

Enjoy!
Allan

justSteve

In the column_render example, I'm having a hard time following how the columns are defined. In the sample table i see 4 columns and am told one is hidden. But the initialization code looks like only columns being defined. Probably aTargers is a convention i'd recognize if i had spent adequate time with your documentation but ....alas. It confusing me too. could you expand?

thx

jonas

Hi Allan,

Thanks for this big update!

When I display some tables using your great library version 1.7beta, sometimes, I get the following error:
too much recursion
(function(){var l=this,g,y=l.jQuery,p=...ch(function(){o.dequeue(this,E)})}});

I definitely don't have the problem with version 1.6.2. Can't give you code sample because it's just producing a table extracted from a DB and applying the library and some options. However, the cells can be edited using jeditable and the first column contains a clickable icon that fires a jquery dialog.

[code]
var oTable = $('#user_data_table').dataTable( {
"bJQueryUI": true,
"bAutoWidth": false,
"iDisplayLength": 25,
"oLanguage": {
"sSearch": "Filter results:"
},
"sPaginationType": "full_numbers"
});
[/code]

allan

@justSteve: Okay - let me walk through the example. The way aoColumnDefs works is it allows you to define a set of initialisation parameters (sType etc) and then pick which columns to assign it to. You don't need to assign a column definition to a particular column - in this case it will just get the default settings. This is the powerful thing about aoColumnDefs - unlike aoColumns, you don't need to define exactly how many columns the table has - that will be detected automatically, and then any columns which match the targeting of a definition will be be set up accordingly.

So in the example we have five columns in the HTML. In the code we have:

[code]
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return oObj.aData[0] +' '+ oObj.aData[3];
},
"aTargets": [ 0 ]
},
{ "bVisible": false, "aTargets": [ 3 ] },
{ "sClass": "center", "aTargets": [ 4 ] }
]
[/code]
The first entry in the aoColumnDefs will target the first column and give it a rendering function. The second entry will hide the fourth column, and the final entry will apply a class of "center" to the fifth column. Not that the second and third columns do not have definitions assigned to them - we just let DataTables do its default configuration there.

You can target more than one column with aTargets. For example:

[code]
"aoColumnDefs": [
{ "sType": "html", "aTargets": [ "html" ] }
]
[/code]
Here all columns which have a TH class of "html" will be given an sType of HTML. Equally we could do something like:

[code]
"aoColumnDefs": [
{ "sClass": "center", "aTargets": [ 0, -1 ] }
]
[/code]
This will target the first column from the left, and the first column from the right, and apply a class of center to both of them.

Does that help?



@jonas: Interesting - I've not come across that yet. Could you possibly try it with the unmimified code please, and paste the extract of where that happens? Closure compiler is great, but it makes working from the unmimified source almost impossible!


@all: Known issues with the beta:
- Header and column alignment is quite easy to break unfortunately. I'm looking into this and have made a number of improvements already, but it's proving rather difficult to get it exactly right...
- TFoot elements are inside the xscroller
- fnSetColumnVis doesn't work with scrolling tables
- A couple of other minor things which have been fixed - the real thing is to get the column alignment bob on...

Regards,
Allan

allan

Hello all,

I'm delighted to say that 1.7 beta 2 is now available for download: http://datatables.net/releases/dataTables-1.7.beta.2.zip .

This release primarily focuses on the scrolling implementation which had a few problems in the first beta. I've rewritten this code (the code is a lot easier to read now!) to perform the task a lot more reliably. There are a couple of other minor fixes, and enhancements as well (tfoot in a scrolling table for example).

Please do continue to test the 1.7 betas, and hopefully 1.7.0 will be able to be released in the near future.

Thanks also to those who have donated for 1.7 :-). It is much appreciated. If you haven't yet, please consider doing so: http://datatables.net/donate .

Regards,
Allan

csulok

Awesome.

Aside from known issues, I haven't run into anything so far.

Are there any performance-related changes planned for the final version of 1.7?

allan

@csulok: There have been a few small improvements in performance that went into the first beta, but nothing in beta 2 - the focus there was to get it working properly! I'm going to have a dig around with a few profilers between release 1.7.0, but there hasn't been a significant amount of change in processing since 1.6.1, which had a great deal of optimisation done on it - so to be honest, I'm not sure how much more I can squeeze out of the current set up. Any suggestions are very welcome indeed!

Regards,
Allan

iuliandum

Hello, Allan

Congratulations for beta 2 of 1.7 Data Table version. It seems to be more stable and "True scrolling" feature seems to be great!

I have some remarks:

I noticed that 'True scrolling' cause the tables to work independently, that 'thead', 'tbody' and 'tfoot'. Important detail for the columns from becoming displaced is that defining '' have to contain 'style = "width: 100%"' and the option '"sScrollX": "100%"' there permanently.

In these conditions the future to ask if you could add the option 'column resizing and dragtable'?

And now encounter several problems with this beta version:

I notice that your sequence is not functional code
[code]
$('#example thead th:eq(2)').hover( function() {
$(this).addClass( 'highlighted' );
}, function() {
$('th.highlighted').removeClass('highlighted');
});
[/code]
What can I do to access 'thead' of column 2?

And I have following problem on an example 'server side':
When are less than 10 recordings showing, for the table not have an ugly appearance, I added the server records empty. But in this case, when there is no record, Data Tables standard result no longer displays "No matching records found."
What can I do this?

Thanks for all!

allan

Hi iuliandum,

1. True scrolling and markup: Unfortunately yes, when you enable scrolling in DataTables the table's markup has to be altered to break it into three div elements (header, body and footer). The reason for this is that it is simply not possible to get tbody scrolling to work reliably across all browsers - x scrolling already wouldn't allow the headers to move with it (I've seen this as a CSS problem in the past, but practicality stands in the way of that).

It is also true that scroll will possibly make your tables more fragile, in that you need to be more aware of the layout. Setting the width to 100% is a good example. It makes sense that this needs to be done, when thinking about sizing, but is something that needs to be considered.

2. Column resizing and dragtable: This is planned for a future plug-in for DataTables.

3. To access the thead element now, there are three options:

- oTable.fnSettings().nTHead - this is the one DataTables uses internally (nTBody and nTFoot also exisit). It might be an idea for an API function to expose these.
- $('div.dataTables_scrollHeadInner thead')...
- Or you could walk the DOM from the #example element.

4. Empty table: I'm afraid I don't understand. Could you point me to an example?

Thanks,
Allan

iuliandum

Thanks for reply, Allan

4. I refer to the following question: When Data Tables not find any results, will show the following result
http://i.imgur.com/u96oZ.jpg

And I suggest the following variant
http://i.imgur.com/nW5q2.jpg

mofle

[bug]

If I clone a table with Datatables on it, and then destroy the clone using fnDestroy, the classes "odd / even" dissapears from the rows of the original table.

Any idea why this happens?


Example
[code]
var $clone = $('table').clone();
var oTableClone = $clone.dataTable();
oTableClone.fnDestroy();
[/code]

I do this because I need the clean HTML (without Datatables) outputted.

nhushka

Hello Allan,

I am now using your 1.7 beta 2. Thank you for all of your work on this product. I am wondering if there is a way to have scrolling enabled, but allow for dynamic sizing of the datatable wrapper when filtering? Meaning, that the datatable will "shrink" to fit the # of results. This functions well in the 1.6.2 version w/out scrolling enabled.

Here is an example of what I mean about it not "shrinking" to fit: http://imgur.com/JtFCr.jpg

And here is an example of it "shrinking": http://imgur.com/FXSVs.jpg

Any options to allow the table with scrolling enabled to "shrink" on filter?

Thanks!

-nhushka

allan

Hi nhushka,

I've been thinking along the same lines for adding this as an option. I'm not exactly clear on how to make it an option yet - but I'll certainly look into it.

Thanks,
Allan

iuliandum

I did so, I have generated a number of blank rows equal to the difference up to 10, on server side

http://i.imgur.com/NHZG8.jpg

allan

@iuliandum: Sorry - I clean forgot to reply - you could set a min-height on td.dataTables_empty which would give the same effect. I'm going to look at a way to 'collapse' the table down to that size as well.

@mofle: The original 'odd' and 'even' classes are stored by DataTables, they are simply stripped and then DataTables will do it's own odd/even classes. fnDestroy prbably should look to restore the classes correctly. Added to the to do list...

Allan

allan

Hi all,

After many hours trying to wrap my head around the peculiarities of table width calculations across the various browsers, I'm really pleased to be able to release the next beta of 1.7 - beta 3. This includes a number of improvements in the scrolling re-draw algorithm and much of the code around that area to make it, hopefully, much more usable for you the developers.

There are number of other improvements, minor new features and bug fixes, which will make moving to this update well worth it! Hopefully not too long before 1.7.0 can be released.

As always, please let me know of any bugs you find, and also please consider making a donation to help the continued development of DataTables: http://datatables.net/donate :-)

Regards,
Allan

jneilliii

So I've been experimenting with the latest beta 3 of datatables, and have dropped it into my existing 1.6.2 project and I am getting weird results on the header when I enable the scrolling features. I'm trying to make my table a "fullscreen" table by making all the dimensions 100%, and when I set the sScrollX/sScrollY variables to 100% it doesn't seem to take. Also, I'm getting double headers, one of them is in the scroll area and doesn't have any of the headers in them, they're just blank. See a screenshot here http://picasaweb.google.com/lh/photo/GR5MlJKTSUBz1kw8X7O9qA?feat=directlink

Great work on the idea of scrolling, I think this would be a welcome replacement to the FixedHeader plug-in if these minor issues could be resolved. It also seems that this would be a good start to allow for re-sizable columns as well. Maybe there's something with my code causing the issue, but it's pretty lengthy and on an internal server, so it's not accessible for you to see, but here's my initialization for the dataTable in my document.ready function.
[code]
oTable = $('#example').dataTable({
"bProcessing": true,
"bStateSave": true,
"bServerSide": true,
"bSortClasses": false,
"sAjaxSource": "getmessagelist.asp",
"fnServerData": fnPostServerData,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bLengthChange": false,
"iDisplayLength":100,
"bJQueryUI": true,
"bAutoWidth": false,
"sDom": '<"H"fr>t<"F"ip>',
"aaSorting": [[6, 'desc']],
"aoColumns": [
{"bSearchable": false, "sWidth": "0px", "bSortable": false, "bVisible": false }, // record id
{"bSearchable": false, "sWidth": "0px", "bSortable": false, "bVisible": false }, // project number
{"bSearchable": false, "sWidth": "32px", "bSortable": false }, // mail icon
{"bSearchable": false, "sWidth": "100px" }, //Sender
{"bSearchable": false, "sWidth": "200px" }, // Recipients
{"bSearchable": false, "sWidth": "400px" }, // Subject
{"bSearchable": false, "sWidth": "130px" } //Date
],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('td',nRow).attr('nowrap','nowrap');
$('td:gt(1)', nRow).each(function (iPosition){
var sCellContent = $(this).html();
sCellContent = '

allan

Hi jneilliii,

I suspect (but am not yet certain) that the problem is coming from the use of scrolling with server-side processing. I think that there is a bug in how the width calculations are done (or perhaps more specifically the order and priority in which they are done) isn't working right with Ajax sourced data (be it server-side processing or not).

I'm not happy with the current algorithm used for the width matching for other reason (it is _horribly_ slow on large data sets, so I'm going to look at implementing a new algorithm which will be faster and deal with this kind of situation correctly - the one concern is that it will be less accurate... More research is needed I'm afraid, so this will hold up the 1.7 release until I'm happy with the implementation :-)

Regards,
Allan

jneilliii

Thanks for the response. I know how tricky things can get when you're dealing with dimension formatting and jQuery.

jnm99

FYI, indeed I found that in IE8 the width calculation is very slow - 20 sec maybe for 500x10 table, vs 5-6 sec with chormium and FF. The problem was I had passed a different number of items in aoColumns than I had elements and that caused the invocation, so this is no longer a problem. But it took a while to find it.

wcmanes

Hi Allan,

Do you have any plans on when 1.7 will be officially released?

Bill

allan

Hi Bill,

As soon as I can basically. I am hoping beta 4 will be the last one, and then it will move to 1.7.0 final. Unfortunately I've not been able to spend as much time as I had been hoping recently on the release, so it's gone a bit slower than planned... Assuming beta 4 goes well I would hope within within 2-3 weeks.

Also, the more testing of the betas, particularly beta 4 when it's ready the better :-)

Regards,
Allan

ricjustsaid

With beta 3, I'm having an issue with table initialization hanging the browser (FF, chrome and IE8) when there are more than 150 rows in the table. It's getting hung-up here (line ~4976, ::_fnGetWidestNode()):

[code]
for ( i=0, iLen=oSettings.aoData.length ; i iMax )
{
iMax = n.offsetWidth;
iMaxIndex = i;
}
}
[/code]

Great work on beta 3!

allan

Hi ricjustsaid,

Agreed - that function is horribly slow, and that is keenly felt when there are many rows. This is what jnm99 and I were discussing above. I've been working on a new algorithm to speed this up dramatically, so if you can hang on for beta 4, things will return to their normal speedy way :-)

Regards,
Allan

jnm99

allan, you are doing a very fine job with datatables. Take it easy, noone should be too affected if beta 4 takes a while more.
cheers

nhushka

Allan,

Again, fine work you are doing on datatables. I wanted to report an issue that is causing some pain when using datatables inside of pages called thru Ajax. The issue seems to be specific to IE as it works fine in FF, Chrome and Safari. I wish only that I could ignore IE forever, but of course that is not an option for many of us. ;-)

I've made a simple page that illustrates this issue here equipped with 1.7beta3: http://voipdemo.bolderthinking.com/njh2/datatableIssue.php

When you load the page that has scrollbars enabled, you are unable to "unload" it or replace the div section with another page. However, if you try any other combination of page loading, not including a page with datatables scrollbars enabled, it works just fine.

Any insight or suggestions would be greatly appreciated on this issue.

Thanks!

nhushka

allan

An update on DataTables 1.7 beta 4's status. I've been working hard on getting this ready, and addressing the issues that have been brought to light with the current 1.7 betas. It is proving fairly difficult in areas to get it working exactly the way I want, but I have been making good progress. I hope to be able to make a release of beta 4 during this coming week - although it is difficult to say exactly when as I'll be travelling next week...

Regards,
Allan

kevinliu

Allan,

fnDestory() in 1.7 beta 3 works well in Firefox, but seems not working for my IE7. It causes javascript error: "'className' is null or not an object". Have you found this?

Thanks,
Kevin

allan

Interesting - I hadn't seen that one, but I will certainly test it and try to fix it for the next release. Thanks for the heads up!

Allan

taelor

just for a heads up, if your using fnSetColumnVis, before I could send in a string, now I have to send in an integer (using parseInt).

I haven't upgraded my datatables in awhile, I just noticed this was one of the things that I needed to do to get the hide/show columns dynamically to work.

Great work though allan! I think the true scrolling is something everyone is gonna love!

allan

Hi taelor,

Good call - it was this line here which was causing this:

[code]
nTd = anTds[ ( i*oSettings.aoColumns.length) + iCol ];
[/code]
If iCol is a string, then the result of i*.length is simply appended to the start of the string - so you might get something like "01" which the browser gets upset about. This is actually present in DataTables 1.6.2, but given how trivial the fix is, I think it's well worth adding it in :-). It will be in the next release.

Regards,
Allan