FixedColumns - v2 released

allan

Hello all,

I'm absolutely delighted to be able to announce the release of FixedColumns 2. This is a big upgrade for FixedColumns itself, but also for the DataTables project as whole moving forward. For those keen to get going immediately:

Download: http://datatables.net/releases/FixedColumns-2.0.0.zip
Documentation: http://datatables.net/docs/FixedColumns
Examples: http://datatables.net/extras/fixedcolumns/examples

This is effectively a rewrite of FixedColumns to ensure the speed of both draw and scrolling. Scrolling is now perfectly smooth in all browsers, regardless of the initialisation settings of either DataTables or FixedColumns thanks to the new 3x3 grid layout that is used. At the same time the draw speed has been significantly improved by using an internal cache of calculated heights. There is also a lot more control over the column widths used for the fixed columns, and resizing the browser window is now nice and smooth.

While this is a great upgrade for FixedColumns, for DataTables as a whole this is an important upgrade due to the work I've done on the documentation for the plug-in. While documentation might not be the most exciting thing in the world, I'm really quite excited about this! Thanks to the power of JSDoc 3 ( https://github.com/micmath/JSDoc - which is still in development btw!), fantastic support from the author, Michael Mathews, and a template that I've put together specifically for DataTables documentation - we now have useful, detailed, accessible, automatically generated documentation for FixedColumns. Check it out here: http://datatables.net/docs/FixedColumn .

Moving forward with DataTables, I plan to integration documentation like this for the core as well as all plug-in modules - hopefully making life easier for developers. If you have any feedback on the documentation and how it might be improved, your thoughts would be very welcome!

I'd like to thank the folks at Roadmap ( http://www.ppmroadmap.com/ ) for sponsoring the work on FixedColumns v2 who have been brilliant in helping out with the development!

Enjoy,
Allan

bill.martino

This seems to be ignoring columns where bVisible is set to false. I have the first 3 columns set to be fixed, and the first 2 columns I get back from my ajax call are hidden. When I apply the fixed columns plug-in, those columns are visible and fixed. if I remove the initialisation code for the fixedColumns, the hidden columns are hidden as they should be.

allan

That is correct. The way FixedColumns 2 works is that it makes use of the column visibility options of DataTables. The columns that are fixed _must_ be the first ones in the table. If you want other hidden columns which are not fixed, then they should come after the fixed columns in the HTML. For example if "a,b,c,d,e,f" are columns, a and b can be fixed, c and d hidden and then e and f scrolling.

Regards,
Allan

bill.martino

Ah, makes sense, I will reorder my hidden columns as it is a great relief to not have the jumpiness in IE and FF when scrolling. However, i did run into another issue where having fixed columns is causing my ajax source to load 3 times now. I have resurrected the thread here: http://datatables.net/forums/comments.php?DiscussionID=4013&page=1#Comment_19208 in case anyone else is encountering this issue

bill.martino

I have found another issue, when I try and navigate to a second page, I receive the following error and no data loads:

e.s.dt.aoData[j] is undefined

removing the fixed column code resolves this issue however, so it would appear to be an issue with the plug-in(?)

allan

Can you give us a link to the example with the issue please? I'm not seeing that problem myself, so I'm not sure what the issue is - but being able to replicate it would be good.

Thanks,
Allan

bill.martino

Unfortunately, i cannot expose the code publicly. I will see if I can work out the issue. I may have to go back to the older version of Fixed Columns, although I was excited to alleviate the issue with the 'jumpy' columns in IE and FF, I may have to compromise if I cannot work out the pagination issue as well as my problem of the ajax source loading 5 times. Thank you for your help though!

allan

Using piplining will certainly address the draw / Ajax issues - which is an unfortunate side effect of the way FixedColumns works. I spent a good bit of time trying to find a way of using only one draw at initialisation, but couldn't find one that worked on all browsers. It is something I will look at again in future.

For the aoData issue, I would need to be able to reproduce that to have a chance of fixing it. I'll try a few more test cases later, but if you were able to create one that would be very useful. Or even just your basic initialisation code.

Allan

bill.martino

here is the code for my page, I would love to use the revised FixedColumns plug-in so if anyone could help I would appreciate it:

[code]
$(document).ready(function(){
// data table
var oTable = $('#resultTable').dataTable({
"sAjaxSource": "ajax_urls.cfm",
"fnServerData": function ( sSource, aoData, fnCallback ) {
// get filter ID
var filter_id = $('#storedFilter_id').val();
// send filter ID
aoData.push(
{ "name": "filter_id", "value": $.trim(filter_id) }
);
$.getJSON( sSource, aoData, function (json) {
fnCallback(json)
} );
},
"aLengthMenu": [100,200,500],
"iDisplayLength": 200,
"sPaginationType": "full_numbers",
"sScrollY": 400,
"sScrollX": "100%",
"bAutoWidth": false,
"bProcessing": true,
"bStateSave": false,
"bServerSide": true,
"bSortClasses": false,
"oLanguage": {
"sProcessing": " Loading..."
},
"sDom": '<"top"il<"showHide">><"pMid"p>rt<"clear">',
"aoColumns": [
{ "sName": "visit_id", "sTitle": "", "bVisible": true
,"sType": "numeric"
,"bUseRendered": false
,"bSortable" : false
,"sClass": "staticColumnIcon"
},
{ "sName": "url", "sTitle": "", "bVisible": true
,"sType": "string"
,"bSortable" : false
,"bUseRendered": false
,"sClass": "staticColumnIcon"
},
{ "sName": "review_status_cp_name", "sTitle": "Status", "bVisible": true
,"sType": "string"
,"sClass": "staticColumnBtn"
},
{ "sName": "highlight", "sTitle": "null", "bVisible": false
,"sType": "string"
,"sClass": "numCol"
,"bUseRendered": false
},
{ "sName": "module_id", "sTitle": "", "bVisible": false
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "date_added", "sTitle": "Date Visited", "bVisible": true
,"sType": "date"
,"sClass": "dateCol"
},
{ "sName": "dealer_name", "sTitle": "Dealer Name", "bVisible": true
,"sType": "string"
,"sClass": "textCol"
},
{ "sName": "product_name", "sTitle": "Product Name", "bVisible": true
,"sType": "string"
,"sClass": "textCol"
},
{ "sName": "product_model", "sTitle": "Product Number", "bVisible": true
,"sType": "string"
,"sClass": "textCol"
},
{ "sName": "module_name", "sTitle": "Service", "bVisible": true
,"sType": "string"
,"sClass": "textCol"
},
{ "sName": "price_code", "sTitle": "Price Code", "bVisible": true
,"sType": "string"
,"sClass": "textCol"
},
{ "sName": "price", "sTitle": "Listed Price", "bVisible": true
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "benchmark_price_1", "sTitle": "Benchmark Price 1", "bVisible": true
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "p_variance_1", "sTitle": "Percent Variance 1", "bVisible": true
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "d_variance_1", "sTitle": "Dollar Variance 1", "bVisible": true
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "below_benchmark_1", "sTitle": "Below Benchmark 1", "bVisible": true
,"sType": "string"
,"sClass": "booleanCol"
,"bUseRendered": false
},
{ "sName": "benchmark_price_2", "sTitle": "Benchmark Price 2", "bVisible": false
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "p_variance_2", "sTitle": "Percent Variance 2", "bVisible": false
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "d_variance_2", "sTitle": "Dollar Variance 2", "bVisible": false
,"sType": "numeric"
,"bUseRendered": false
,"sClass": "numCol"
},
{ "sName": "below_benchmark_2", "sTitle": "Below Benchmark 2", "bVisible": false
,"sType": "string"
,"sClass": "booleanCol"
,"bUseRendered": false
},
{ "sName": "title", "sTitle": "Page Title", "bVisible": true
,"sType": "string"
,"sClass": "textCol"
}
]
});
/* left most column - URL - is static */
new FixedColumns( oTable, {
"iLeftColumns": 3 ,
"sLeftWidth": "fixed",
"iLeftWidth": 186
} );
});
[/code]

blueguse

Are you unable to use Fixed columns with server side ajax as a datasource and paging? I am attempting to use the 2 fixed columns example with my table that has many pages and datasource is server side. When I go to the next page the data on the left is blank.

bill.martino

yes, pagination with server side datasource is my issue as well.

Karthik

Allan, is this part of the DataTable 1.7.6 release?

allan

No - FixedColumns 1.1.0 was the version which shipped with DataTables 1.7.6. You can get the newer version of FixedColumns from the downloads page ( http://datatables.net/download ).

Allan

fvdmaele

I have the same problem - Pagination doesnt work with Fixedcolumns (1 column on the left) with ajax & server side processing.

This is the error i get with DataTables 1.7.6 and FixedColumns 2.0.0 :

Uncaught TypeError: Cannot read property '_anHidden' of undefined
FixedColumns._fnClone.a.body.style.widthFixedColumns.min.js:34
d.d.extend.eachjquery.js:16
d.d.fn.d.eachjquery.js:16
FixedColumns._fnCloneFixedColumns.min.js:33
FixedColumns._fnCloneLeftFixedColumns.min.js:31
FixedColumns._fnDrawFixedColumns.min.js:30
FixedColumns._fnConstruct.s.dt.aoDrawCallback.fnFixedColumns.min.js:25
CdataTables.js:58
uadataTables.js:62
j.fn.dataTable.a.iDrawdataTables.js:61
(anonymous function)

allan

Can you try the development version of FixedColumns 2.0.1.dev from the downloads page please: http://datatables.net/download/ . If that doesn't work it would be good if you could give us a link to your example which doesn't work.

Allan

fvdmaele

Hi Allen,
Thanks for the quick reply.

Unfortunately, FixedColumns 2.0.1dev didnt help. Exactly the same problem.

I can't make the code available externally. Any idea what the problem could be ? I see various people have the same problem.

allan

Not a clue I'm afraid. I'd need to be able to reproduce the issue. Doing a search for "Cannot read property '_anHidden'" doesn't show any other hits on this issue - can you link to a discussion with that so I can get some background. If you can post a cut down example on jsfiddle or similar showing the issue that would be useful.

fvdmaele

Hi Allen,

I've debugged the FixedColumns 2.0.0 version and found the error (although not really the root cause - maybe you can help me with that)

Basically, I have a table with 500+ entries, service side processing and paging on 25 entries
When clicking page "2", the size of aiDisplay is 25, and the iDisplayStart value is 25
problem is that var i becomes null, which causes the error

Here is my change (see the commented out line + comment)

[code]
if ( this.s.dt.aiDisplay.length > 0 )
{
$('>tbody>tr', that.dom.body).each( function (z) {
var n = this.cloneNode(false);
//var i = that.s.dt.aiDisplay[ that.s.dt._iDisplayStart+z ];
// iDisplayStart = 25, but aiDisplay.size = 25 so i becomes null
var i = that.s.dt.aiDisplay[ z ];
for ( iIndex=0 ; iIndex

allan

Ah nice one - it's server-side processing that is causing the problem. Thanks very much for the debugging information - I'll put in a fix for this shortly.

Allan

fletch

Hi Allan, this FixedColumns plugin is working brilliantly for our application, with just one niggling problem. We're dynamically adding/removing rows from the parent DataTable after the initial draw, and we're finding that the fixed first column is not resizing to accommodate the largest cell. Having done a code read I think this is not a bug, more that it was not designed to support this case - so I will completely understand if you don't fancy changing the code!

However, if you DO think this is a feature worth having, I think the changes required are as follows:

1. Move the code block in _fnConstruct that calculates iLeftWidth and iRightWidth into a subroutine (the code starts with $('tbody>tr:...)
2. Call this function followed by _fnGridLayout on every draw.

What do you think?

allan

Hi fletch,

You are quite right - this isn't something that was specifically design in. However, I've done some work related to this in the current development version of FixedColumns - I've added a new API function called fnRedrawLayout which will redraw the layout: https://github.com/DataTables/FixedColumns/commit/8c71379267ff23cf41dc75984e2e59172174c778

This doesn't however recalculate the column widths. That I suspect is a lot harder, more so that what is done in the constructor at the moment since the columns are actually hidden as far as DataTables is concerned - therefore it doesn't actually recalculate those column widths. I'll have a think about how that might be done, but I suppose option option is to manually set the column width and then redraw the layout.

Allan

fletch

Thanks for the quick response Allan, and looking forward to your solution (do let me know if you don't think you have time to work on this so I can manage expectations over here ;-)

allan

I think the auto recalculation might be a good way off as there is a lot of other pressing stuff that I need to look at just now, and I suspect that the fix for this will not be trivial. The FixedColumns 2.0.1 release has the fnRedrawLayout function in it, which can be useful for setting the column width manually, but automatic calculation will take a bit more effort.

Allan

fletch

OK, I reckon that fnRedrawLayout should give us a reasonable solution for now.

Thanks again!