Hide/show rows based on class

ldoodle

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

glenderson

First, if your method works for you, then it is excellent and does exactly what you need it to do. Don't change a thing.

A more native method might be use the .hide() and .show() methods.

https://datatables.net/reference/api/row().child.hide()

When I allow a row delete, I actually replace the rows contents with "This row has been deleted" with a link in the same row for "Undelete". I happen to use ajax methods to refresh existing rows in a table. My own developed API takes into consideration whether the entire table is being drawn first time, if it's an update of a row, a new insert of a row, the state of the row, whether the row it currently displayed, if it's been updated by a concurrent user, etc. I mention this only to bring you back to my first statement, if what you do works, keep it. But, with dataTables you can do some amazing things!

ldoodle

Hi,

Sorry to have disappeared!

Am I right in saying that row().child.hide() is for child rows of rows? My table is not laid out like that.

allan

Yes - you are correct. The row().child() methods are all for control of the DataTables controlled child rows.

Allan