FixedColumns - v2 released
FixedColumns - v2 released
allan
Posts: 61,972Questions: 1Answers: 10,160 Site admin
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
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
This discussion has been closed.
Replies
Regards,
Allan
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(?)
Thanks,
Allan
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
[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]
Allan
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
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.
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
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?
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
Allan
Thanks again!