不匹配时隐藏table(wenzhixin的扩展bootstraptable)

Question

我有一个包含三个 table 的页面。我在第一个 table 上放了一个 "button formatter"，当点击它时，它会为后两个设置数据-url。

示例：

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'
            });
        }
    };

现在，并非所有 "id" 行都有任何数据。有两个 table 显示它们没有什么可显示的，这有点让人眼疼。

问题：

是否可以将 actionlistener 设置为 table，例如 "done loading data"，然后检查 table 是否为空，是否执行某些逻辑（例如设置div 待隐藏)

Answer 1

解决了我自己的问题。

Bootstrap table 支持事件，所以我监听 "load-success" 事件，当它触发时我从 table 获取数据并检查它是否不再存在比 2 ( "[]" )。如果是两个，则表示 table 为空。

示例：

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

Answer 2

    let $msgTable = $('#bootstrapTable');
    $msgTable.on('load-success.bs.table', function (data) {
        let $tableBlock = $('#bootstrapTableBlock');
        if (data.length > 0) {
            $tableBlock.show();
        } else {
            $tableBlock.hide();
        }
    });

不匹配时隐藏table(wenzhixin的扩展bootstraptable)

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

jquery

bootstrap-table