Getting the current expanded row selector of a FooTable

Question

I am using FooTable to display tables and like the responsive features of the object. In my table, I have some fields/cells that are blank and would like to hide those when a FooTable row is expanded. Right now it shows the Label and then a blank element next to it. I would like to hide those elements that are blank and I think I want to do it in the FooTable event "footable_row_detail_updating" and I think I need the syntax or method to get the current selected row.

How would I go about getting a jQuery selector to the current expanded row in FooTable or am I overlooking something that might be easier.

Answer 1

Instead of selecting the current row and modifying it's detail row's contents you can directly plug into the createDetail function and do it there.

For example, this following filters out detail data that have a blank value before calling the actual function that creates the detail row (footable.options.createDetail).

$('.footable').footable({
    createDetail: function (element, data, createGroupedDetail, separatorChar, classes) {
        var filteredData = $.grep(data, function (prop) {
            return prop.value !== ''
        });
        footable.options.createDetail(element, filteredData, createGroupedDetail, separatorChar, classes)
    }
})

You could do more in the same function. For example, if there is nothing in the filteredData, you could just set the text to "No detailed data" instead of calling footable.options.createDetail. Something like

$(element).text("No detailed data")

element is the div that contains all the detail row information.