Search code examples
javascriptjquerybootstrap-table

Bootstrap not showing data from REST endpoint?

Hitting one of my REST endpoints using bootstrap table, but the data us now showing at all. Here's what I'm working with (see the 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">';
            }
        }
    ]
});

Based on what I can see I'm getting the correct data from the endpoint, but the table isn't showing the proper data. See below for the response:

enter image description here

Where it fails is with the getData()method:

enter image description here

If I reset the value of data in the console the data will show properly:

 data = this.options.data;

Any ideas? Does Bootstrap Table expect the response to be exactly the same structure as the columns?

Update 1

I tried using this approach, but still no avail... Such a widely used widget this is definitely a show stopping issue.

I got the data using an ajax call like the table does and I cleaned the data so we have:

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

Here is the code I used below:

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();
}
Solution

  • Figured it out! It was linked to:

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

    This will autofill the search bar with content and will attempt to find the user based on that search term. Removing this property solved the issue.