Search

Thank you allan. That was really helpful :) . I appreciate it.

I've found a work-around. Rather than using the html < table> tag, the tables can be rendered CSS and div/span tags instead of using < table> tags (see http://www.vanseodesign.com/css/tables/ for more info). Here is an updated jsfiddle showing my working embedded tables that have fresh clean css (no inheritance from the DataTable). http://jsfiddle.net/eexw71as/

thanx allan its up and running.

Ahh... perfect! Just what I needed, thanks a lot Hans! :)

Possibly you could use row().invalidate(), but to be certain we'd need to see the full code - and ideally a test case. Allan

for others: [code] /* Apply the jEditable handlers to the table / $( ".editable", oTable.fnGetNodes( ) ).editable( "/rates/detail/save", { callback: function( sValue, y ) { / Update the 'data-changed' attribute in the td node / this.setAttribute( 'data-changed', 'true' ); / Set the color to show the td node was changed / this.style.color = 'blue'; / Set the td node data */ var mPos = oTable.fnGetPosition( this ); oTable.fnUpdate( sValue, mPos[0], mPos[1], true ); /* Restore bootstrap popover */ $( oTable.fnGetNodes( ) ).children( 'td.editable' ).popover( { // This is what matters!! "container": "body", "animated": true, "placement": "bottom", "trigger": "hover" } ); }, submitdata: function( value, settings ) { return { "_token": "{{ csrf_token() }}", "ratesheader_id": "{{ $RatesHeader -> id }}", "prtnum": this.parentNode.getAttribute( "data-prtnum" ), "trmnum": this.getAttribute( "data-trmnum" ) }; }, "height": "14px", "select": true } ); [/code]

Thanks Allan. I ended up just passing that sData generated string to another page to update SQL database.

Thank you Allan, that was helpful.

In the mean time I have figured out I can resolve this by using: [code]e.stopPropagation();[/code] on each element that I don't want to execute sorting...

WOW, I figured it out: $('#assignments').dataTable({ "sScrollY": "300px", "bPaginate": true, "bProcessing": true, "bServerSide": false, "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], "aoColumnDefs": [{ "sWidth": "35%", "aTargets": [0] }, { "sWidth": "50%", "aTargets": [1] }, { "sWidth": "15%", "aTargets": [2]}], "fnDrawCallback": function () { $('#assignments tbody tr').each(function () { var sTitle; var rowMousePos = $('td', this); var insGrp = $(rowMousePos[0]).text(); var products = $(rowMousePos[1]).text(); var assignment = $(rowMousePos[2]).text(); sTitle = insGrp + products + assignment; this.setAttribute('title', sTitle); }); } }); /* Apply the tooltips */ $('#assignments tbody tr[title]').tooltip({ "delay": 0, "track": true, "fade": 250 }); Brilliant, from here I should be able to work out how to get the selected option of the select for $(rowMousePos[2].text();