Bootstrap 没有显示来自 REST 端点的数据？

Question

使用 bootstrap table 命中我的一个 REST 端点，但我们现在显示的数据根本没有。这是我正在处理的内容（参见 fiddle: https://jsfiddle.net/vgwod3fb/）：

$('#data-table').bootstrapTable({
    url: '/rest/endpoint,
    striped: true,
    iconSize: 'btn-sm',
    cache: false,
    search: true,
    searchOnEnterKey: true,
    searchText: 'Search for a member...',
    columns: [
        {
            checkbox: true,
            field: 'check',
            clickToSelect: true,
            searchable: false
        },
        {
            field: 'email',
            title: 'Name',
            sortable: true,
            clickToSelect: false
        },
        {
            field: 'role',
            title: 'Type',
            sortable: true,
            clickToSelect: false
        },
        {
            field: 'actions',
            title: 'Actions',
            sortable: false,
            clickToSelect: false,
            formatter: function () {
                return '<img class="control" src="/assets/images/delete.svg" alt="Delete">';
            }
        }
    ]
});

根据我所见，我从端点获取了正确的数据，但 table 未显示正确的数据。请参阅下面的回复：

失败的地方是getData()方法：

如果我在控制台中重置数据值，数据将正确显示：

 data = this.options.data;

有什么想法吗？ Bootstrap Table 是否期望响应与列的结构完全相同？

更新 1

我尝试过使用这种方法，但仍然无济于事...如此广泛使用的小部件这绝对是一个展示问题。

我像 table 一样使用 ajax 调用获取了数据，我清理了数据，所以我们有：

 {
      checkbox: true,
      email: 'user@foo.com',
      role: 'foo',
      actions: undefined
 }

下面是我使用的代码：

if (_$dataTable) {
    var deferred = $.Deferred(), json = null;

    $.getJSON('http://localhost:3000/members/list/01tuee743h9muf6', function (data) {
        deferred.resolve(data);
    }).fail(function (error) {
        deferred.reject(error);
    });


    $.when(deferred).done(function (json) {
        json = Utils.dataCleanup(json);

        _$dataTable.bootstrapTable({
            striped: true,
            iconSize: 'btn-sm',
            cache: false,
            search: true,
            searchOnEnterKey: true,
            searchText: 'Search for a member...',
            data: json,
            columns: [
                {
                    checkbox: true,
                    field: 'check',
                    clickToSelect: true,
                    searchable: false
                },
                {
                    field: 'email',
                    title: 'Name',
                    sortable: true,
                    clickToSelect: false
                },
                {
                    field: 'role',
                    title: 'Type',
                    sortable: true,
                    clickToSelect: false
                },
                {
                    field: 'actions',
                    title: 'Actions',
                    sortable: false,
                    clickToSelect: false,
                    formatter: function () {
                        return '<img class="control" src="/assets/images/delete.svg" alt="Delete">';
                    },
                    events: function () {
                        // TODO: add some events...
                    }
                }
            ]
        });
    }).fail(function (error) {
        console.error(error);
    });

    return deferred.promise();
}

Answer 1

想通了！它链接到：

 searchText: 'Search for a member...',

这将使用内容自动填充搜索栏，并尝试根据该搜索词查找用户。删除此属性解决了问题。

Bootstrap 没有显示来自 REST 端点的数据？

Bootstrap not showing data from REST endpoint?

javascript

jquery

bootstrap-table

更新 1