Search

if you open up tabletools.js and look into the _fnGetDataTablesData there will be a loop that will process all the drilldown data. In my example i was inserting another table on the drilldown and added code it so it would spit it out on the following format a a a b b b x x c c c where x is the drilldown data and a,b,c are regular collumns here is the code i added. [code] if ( oConfig.bOpenRows ) { arr = $.grep(dt.aoOpenRows, function(o) { return o.nParent === tr; }); if ( arr.length === 1 ) { sLoopData = "\t\t"+ this._fnBoundData( $('td', arr[0].nTr).html(), oConfig.sFieldBoundary, regex ); sLoopData.replace(/\n/g," "); sLoopData = sLoopData.replace( "</td></tr></tbody></table>", "" ); sLoopData = sLoopData.replace( /<.tr>/g, "\n\t\t" ); sLoopData = sLoopData.replace( /<.th>/g, "\t" ); sLoopData = sLoopData.replace( /<.td>/g, "\t" ); sLoopData = sLoopData.replace( /<.*?>/g, "" ); aData.push( sLoopData ); } } [/code] which is replacing some table tags for new line and new rows and then at the end, it will remove the unseeded tags. Not the cleanest way of doing it, it was my first time using regex, but it got the job done for me. Hope this can help Cheers.

See the live example - http://live.datatables.net/utayag/12/edit#javascript,html,live - Seems there's some issue in 'Render' view, but ok in preview panel, so check out the result in preview panel - The fnPreInit option in my plugin is not working as expected when the table data source is DOM (I will check why). Instead I did the preparation work in fnCreatedRow callback to get the same

Correct - mData was introduced in 1.9.3 :-). Allan

I figured it out; through a combination of: [code]"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {}, "fnDrawCallback": function( oSettings ) {}[/code] I set a document scoped "var" of the current page being displayed in the fnRowCallback, and then I on the fnDrawCallback callback I use that to test if the sub-table has been initialized. If anyone wants to see the full example, just let me know.

my script is as follows, jQuery.fn.dataTableExt.oSort['string-case-asc'] = function (x, y) { return ((x < y) ? -1 : ((x > y) ? 1 : 0)); }; jQuery.fn.dataTableExt.oSort['string-case-desc'] = function (x, y) { return ((x < y) ? 1 : ((x > y) ? -1 : 0)); }; $(document).ready(function() { $('#datatable-wrapper').append(''); $('#example').dataTable( { "bStateSave":true, "fnStateSave": function ( oSettings , oData) { alert("fnSaveState invoked"); localStorage.setItem('DataTables_'+window.location.pathname, JSON.stringify(oData)); }, "fnStateLoad": function (oSettings) { alert("fnStateLoad invoked"); var data = localStorage.getItem('DataTables_'+window.location.pathname); return JSON.parse(data);}, "fnInitComplete": function(oSettings) { var cols = oSettings.aoPreSearchCols; for (var i = 0; i < cols.length; i++) { var value = cols[i].sSearch; if (value.length > 0) { $("tfoot input")[i].value = value; } } }, "bServerSide": false, "bAutoWidth": false, "bJQueryUI": true, "sPaginationType": "full_numbers", "sDom": 'Tlfrtip', "aaData": [ [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ], [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ], [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ], [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ], [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ] ], "aoColumns": [ { "sTitle": "Engine" }, { "sTitle": "Browser" }, { "sTitle": "Platform" }, { "sTitle": "Version", "sClass": "center" }, { "sTitle": "Grade", "sClass": "center", "fnRender": function(obj) { var sReturn = obj.aData[ obj.iDataColumn ]; if ( sReturn == "A" ) { sReturn = "A"; } return sReturn; } } ] }); $("tfoot input").keyup(function () { oTable.fnFilter(this.value, $("tfoot input").index(this)); }); var startPosition; var endPosition; $("#datatable-wrapper #example tbody").sortable({ cursor: "move", start:function(event, ui){ startPosition = ui.item.prevAll().length + 1; }, update: function(event, ui) { endPosition = ui.item.prevAll().length + 1; } }); });

I am having a similar problem. I have a table, and all the titles to the columns will not line up over the columns, they are all crushed to the left side of the screen. I am calling fnAdjustColumnSizing, but it doesn't automatically fix the error. If I minimize and maximize my screen then everything works as it should and they line up. but without it, it doesn't work. here is my code: function (schedule) { if (schedule) { var crewTbl = ich.crewData(schedule); crewTbl.find('#crewTable').dataTable( { //"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'><'span6'p>>", "sDom": "t", "oLanguage": { "sLengthMenu": "_MENU_ records per page" }, "bSort": false, "bPaginate": false, "sScrollY": "200", "bScrollCollapse": true } ); fp.async(function() { //adjust column sizing to make sure the column headers line up $('#crewTable').dataTable().fnAdjustColumnSizing(); //this is the search filter for the table $('#crewSearch').on('keyup', function() { $('#crewTable').dataTable().fnFilter($(this).val()); }); // addCrewColumnFilters(); //make sure the table resizes properly when window is resized $(window).bind('resize', function () { $('#crewTable').dataTable().fnAdjustColumnSizing(); } ); } );

Thanks Allan for you swift response and again for a great plugin. :)

So far as I can determine, what appears to be happening is that the first table gets a TableTools object on dataTable initialization. But subsequent tables do not get a TableTools object. I've overcome this by wrapping the initialization in an .each(), like so: [code] $(document).ready(function(){ $('.dtg').each(function(){ $(this).dataTable({ "bJQueryUI": true, "bProcessing": true, "bStateSave": true, "sDom": '<"H">tr<"F"T>', 'sScrollX':'100%', "oTableTools": { "sRowSelect": "single", "sSwfPath": "media/swf/copy_cvs_xls_pdf.swf", "aButtons": [],// no buttons "fnRowSelected": function(node){ var table = $(node).parents('table'); aData = $(table).dataTable().fnGetData(node); context = $(table).parents('div.fs'); $('input[name="col1"]',$(context)).val(aData[0]); $('input[name="col2"]',$(context)).val(aData[1]); }, "fnRowDeselected": function(node){ var table = $(node).parents('table'); aData = $(table).dataTable().fnGetData(node); context = $(node).closest('div.fs'); $('input[name="col1"]',$(context)).val(undefined); $('input[name="col2"]',$(context)).val(undefined); } } }); }) }); [/code]

Okay, just got this figured out. If anyone else is running into this issue, it helps to use the index files and make sure you have the correct .js files linked. It gets a little confusing with the media/js/ColReorder as those file locations are similar for demos vs the actual .js files to link to. Still love this tool as I think is well above and beyond anything else I have tried to work with, just a step by step how-to would be helpful. Maybe as a user group that should be an effort we establish if it hasn't already been started.

Sorry lost track of this. on the Jeditable website, in order to set it in edit mode initally. I was told: You can trigger the used event when your document loads. For example: $(function() { $("#editable").trigger("click"); Not sure how to access this trigger event on Datatables? Any help?