Hide table on no matches (wenzhixin's extended bootstrap table)

Question

I have a page with three tables. I put a "button formatter" on the first table, when clicked it sets the data-url for the second two.

Example:

window.actionEvents = {
     'click .edit': function (e, value, row, index) {
            $('#tabletwo').bootstrapTable('refresh', {
                url: '/api/controllerExample/' + row.id + '/exampleActionOne'
            });
            $('#tablethree').bootstrapTable('refresh', {
                url: '/api/controllerExample/' + row.id + '/exampleActionTwo'
            });
        }
    };

Now, not all row "id" rows will have any data. And such its kind of an eye-sore with two tables displaying that they have nothing to display.

The question:

Is it possible to set an actionlistener to a table such as "done loading data", and then check if table is empty, if it is perform some logic (such as setting a div to be hidden)

Answer 1

Solved my own question.

Bootstrap table supports events, so I listen on a "load-success" event, when it fires i get the data from the table and check if its no more than 2 ( "[]" ). If its two it means the table is empty.

Example:

       $('#tabletwo').on('load-success.bs.table', function () {
            if (JSON.stringify($('#tabletwo').bootstrapTable('getData')).length < 3) {
                        $('#containingDiv').hide();
                    } else {
                        $('#containingDiv').show();
                    }
        });