Hey,
I think this has probably been asked before, but couldn't find an answer for my case.
I have multiple tables on a page. The user can delete and restore rows.
Due to the restoring feature, simply removing a row is not suitable as the data would be gone for them to restore. So I'm currently using native jQuery hide/show functions to achieve this.
As it's an intranet it's not easy to post a link. The process is this:
On page load, data is pulled from a database. All records are returned, including those flagged as 'deleted'. The rows flagged as deleted get given a table row class of 'deleted' so are not shown. CSS styles this class as display: none.
The user then presses a button to show deleted rows, which includes a button to restore the row. All that happens is fadeOut > remove the 'deleted' class > fadeIn. Then recount the number of non hidden rows.
Deleting a row is similar: fadeOut > add 'deleted' class to the row. If the show deleted items option is turned on, it fades back in.
var row = $( this ).closest( "tr" );
var elem = row.prop( "tagName" ).toLowerCase();
switch( action ) {
case "delete":
row.fadeOut( "slow", function( event ) {
rowCount = row.closest( "table" ).find( "tbody > tr:visible:not( .deleted )" ).length;
row.closest( "div.content" ).prev( "div.header" ).find( "h2 > span" ).html( rowCount );
row.addClass( "deleted" );
} );
if( $( "#deleteditems" ).val() === "show" ) {
row.fadeIn( "slow" );
}
break;
case "restore":
row.fadeOut( "slow", function( event ) {
row.removeClass( "deleted" );
} ).fadeIn( "slow", function( event ) {
rowCount = row.closest( "table" ).find( "tbody > tr:visible:not( .deleted) " ).length;
row.closest( "div.content" ).prev( "div.header" ).find( "h2 > span" ).html( rowCount );
} );
break;
}
I'm guessing there's a (much) better way to do it natively in DataTables?
Thanks
