Table with hidden rows under "parent visible" rows: how to not to sort'em! Just move'em!

[marcreig]

Hi, a lot of months since my last appearance here!

This time, I've something "new".

I've a table, with header and body and footer. This table have, let's say, 5 rows, for example. But in reality it has the double of rows, so 10. But those extra 5 are hidden. So we've something like:

header
(1) visible row
hidden row (details for row 1)
(2) visible row
hidden row (details for row 2)
(3) visible row
hidden row (details for row 3)
...
footer

Every visible row has a button on the very left, which shows it's associated hidden row under it. This is a row with a single cell with a colspan as long as all the table cells. And it contains extra info and calculation detalis for the info appearing on its visible top row.

So I guess you see where I go: when I sort, I loose this functionality.

What I want is to sort only the visible rows, and move under the visible ones it's hidden associated rows without involving'em into the sort.

I've seen someone that asked something similar?

https://github.com/drvic10k/bootstrap-sortable/issues/58

But don't know exactly how to apply it or where... Can you show the snippet to achieve it please?

Thanks alot for your efforts, as always!!

Regards,

Mark.

[drvic10k]

Hi, what I proposed there is that you should remove all the hidden rows in the before-sort event callback and add them back in the sorted event callback

[marcreig]

Ok, I'm trying something for this.

But, if you have a TH with a default-sort="asc", when page loads it shoots sorting but do not calls before-sort and sorted events. At least that's what I'm seeing.

And even having default-sort="asc" on a name colum, the symbol of ordering appears inverted, and if I call $.bootstrapSortable(false, 'reversed'); on document.ready, it doesn't change at all. Is this feature working now? It always worked... :\

[drvic10k]

I have to have a look at that, might be that the events are not fired on the initial sort (if that's true, I will fix it)

regarding the sign, can you provide a sample on jsfiddle?

[marcreig]

Well that's the code I came about.

You see of any improvation to do? Tell me please :)

//BOOTSTRAP-SORTABLE:
if( $('table.sortable').length ){
    $.bootstrapSortable(false, 'reversed');

    var hiddens = null;
    var table = null;
    $('table.sortable').on('before-sort', function(){
        table = $(this);
        hiddens = table.find("tr[id*=info_fondo_]").detach();
    });
    $('table.sortable').on('sorted', function(){
        hiddens.each(function(){
            $(this).insertAfter("#data_fondo_"+$(this).attr("fondo"));
        });
        hiddens = null;
        table = null;
    });
}

This is inside the document.ready. And you see that the "reversed" thing is on. But it doesn't make a change! The symbol always appears reversed (in my point of understanding!). :)

[marcreig]

Definetly, it doesn't call events before-sort and sorted when you have a data-defaultsort="asc" on a TH. It autosorts on very loading but obiously, it does it wrong according to exposed situation here. And the sign problem keeps on rolling... It appears on wrong direction even with the $.bootstrapSortable(false, 'reversed'); on.

EDIT: I've tested on others apps with this plugin on, and since last updated version, it doesn't work. So it seems something gone wrong with last pushed version...

[marcreig]

I guess it's here, on the initialize where you do doSort, instead of sortByColumn():

$this.find('thead th[data-defaultsort!="disabled"]').each(function (index) {
    var $header = $(this);
    var $sortTable = $header.closest('table.sortable');
    $header.data('sortTable', $sortTable);
    var sortKey = $header.attr('data-sortkey');
    var thisLastSort = applyLast ? context.lastSort : -1;
    bsSort[sortKey] = applyLast ? bsSort[sortKey] : $header.attr('data-defaultsort');
    if (bsSort[sortKey] !== undefined && (applyLast === (sortKey === thisLastSort))) {
        bsSort[sortKey] = bsSort[sortKey] === 'asc' ? 'desc' : 'asc';
        doSort($header, $sortTable);
    }
});
$this.trigger('sorted');

I'm talking about the data-defaultsort="asc" part, which shoots on initializing but via a wrong function... And then you call the trigger "sorted", but not the before-sort on the beggining of this snippet...

And about the "reverse" parametter, I've seen the new constructor function, and changed parammeters to "options" array. I've debugged the initialization and it doesn't work as expected. Frist time it runs, it goes through the "else", so it normally initializes everything. Second time, if you call it thorugh $.bootstrapSortable(false, 'reversed'); it goes to the second "else if", which is the one about constructor === Boolean. But it doesn't go to anything related with "reversed" as I can see...

[marcreig]

Good morning!

Anything new? I need this working stable... :( Have you found something? Is it OK the code I've showed to you and the aspects I've comment here?

[drvic10k]

sorry, I didn't have time to look at it, maybe today

[drvic10k]

quoting the readme: In version 2, the parameters to $.bootstrapSortable function were changed to single Object. For basic compatibility, you can still use single Boolean parameter (applyLast), other parameters are passed as properties of the Object.

so it doesn't work as you try to use it, if you want to pass more parameters, you have to wrap them in an object: $.bootstrapSortable({applyLast: false, sign: 'reversed'})

I will have to improve the readme regarding this new parameters usage.

[drvic10k]

about the event, you are right the before-sort event is not triggered for the initial sort, I will create an issue for that

[marcreig]

Amazing about the object properties. It worked like a charm! Thanks. And about this issue of "before-sort", I'll wait for it. As soon as you got it, I'll download the new version and update my code!

Thanks man! You're awesome!

[drvic10k]

meanwhile you can workaround it like this:

//BOOTSTRAP-SORTABLE:
if( $('table.sortable').length ){
    var hiddens = null;
    var table = null;

    table = $(this);
    hiddens = table.find("tr[id*=info_fondo_]").detach();

    $.bootstrapSortable(false, 'reversed');

    $('table.sortable').on('before-sort', function(){
        table = $(this);
        hiddens = table.find("tr[id*=info_fondo_]").detach();
    });
    $('table.sortable').on('sorted', function(){
        hiddens.each(function(){
            $(this).insertAfter("#data_fondo_"+$(this).attr("fondo"));
        });
        hiddens = null;
        table = null;
    });
}

[marcreig]

Morning!

Will you do new version today?

About the workaround, first $(this) assignation to table var is not properly working. This should be refered by all tables that have hidden rows and are sortable, and individually treat'em, as there can be multiple sortable tables on screen with hidden rows. Not my particular case, but thinking on a major code perspective.

EDIT: oh! and in the example workaround, you wrote:

$.bootstrapSortable(false, 'reversed');

I guess you meant:

$.bootstrapSortable({applyLast: false, sign: 'reversed'})

right?

Or the real good version is a combination of both:

$.bootstrapSortable(false, {sign: 'reversed'})

[marcreig]

I've finally end up with this:

//BOOTSTRAP-SORTABLE:
if( $('table.sortable').length ){
    //In version 2, the parameters to $.bootstrapSortable function were changed to single Object.
    //For basic compatibility, you can still use single Boolean parameter (applyLast), other parameters are passed as properties of the Object.
    $.bootstrapSortable({applyLast: false, sign: 'reversed'});

    $('table.sortable').on('before-sort', function(){
        $(this).find("> tbody > tr.hidden_row").detach().appendTo("tfoot");
    });
    $('table.sortable').on('sorted', function(){
        $(this).find("> tfoot > tr.hidden_row").detach().each(function(){
            $(this).insertAfter($(this).attr("ref"));
        });
    });

    //Temporary patch to solve ISSUE #87:
    $('table.sortable').trigger("before-sort");
    $('table.sortable').trigger("sorted");
}

So I move the hidden rows to the footer, and bring'em back under every asociated visible row, in the end. Playing this way, I do not need middle-variables.

This has only one problem, if you sort when made a hidden row visible (to see the info inside), moving it to the footer will cause to see the now visible TR on the footer, I suppose on a very slow machine, because I've tried this so many times and never happened this effect. But this could happen, "teorically"...

[drvic10k]

I will create new version, when some more issues pile up, because it's quite time consuming to do all the releases

[marcreig]

Roger that.

Now there is somethin' I don't know if is related or not, but on those hidden rows with a single TD with a full colspan, I've some info and another sortable table inside (no hidden rows on those detail tables). Parent table with hidden rows, have a column with the default-datasort="asc". And the inside-detail-hidden-rows sortable tables have a column with this default-datasort="asc" too. Problem is, it appears DESC in reality. Don't know why. And when I sort parent table doing the detach() and insertAfter thing, the inner detail tables lose the order symbol, but keep the sorting...

Strange...

[AlexanderRodecape]

Where does this code you guys came up with go exactly? and does the hidden row need some kind of specific id to indicate that it is hidden?