Search

Ok thanks anyway :-).

I just realized I have the Row highlight function on mouseover applied too: $("#usrSearch tbody tr").each(function () { $(this).mouseover(function () { color = $(this).css("background-color") $(this).css("background-color", "#A9D1DE"); }).mouseout(function () { $(this).css("background-color", color); }); }); I remmed it out and the table looks fine now. Can this still be applied and also have the alternating row colors or not?

Yup, you can use iDeferLoading to accomplish that job.

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. :)