Reload the bootstrap datatable after every minute?

Question

I am using bootstrap server side datatable in my angularjs application and now i want to reload the data of that datatable after every minute. So how can i do it? I am using the following code:

HTML:

<table bs-table-control="matterTableControl"  id="matterTableControl"></table>

Controller:

$scope.getMatterTable = (function () {
    $scope.matterTableControl = {
        options : {
            toolbar : "#get",
            url : url,
            dataField : 'rows',
            cache : false,
            sidePagination : 'server',
            pagination : false,
            showExport : false,
            queryParams : queryParams,
            clickToSelect : true,
            onClickRow : onClickRow,
            maintainSelected : true,
            columns : [{
                    field : 'ClientName',
                    title : 'Client',
                    align : 'left',
                    valign : 'bottom',
                    sortable : false
                }, {
                    field : 'Name',
                    title : 'Matter',
                    align : 'left',
                    valign : 'bottom',
                    sortable : false
                }
            ]
        }
    }
});

I am trying to reload this by using following code but getting no success:

$interval(function () {
   $scope.getMatterTable();
}.bind(this), 60000);

Documentation of Datatable: http://bootstrap-table.wenzhixin.net.cn/documentation/

Example: http://issues.wenzhixin.net.cn/bootstrap-table/#integrate/angular

Github Code of datatable: https://github.com/wenzhixin/bootstrap-table-examples/tree/master/integrate/angular

`angular.element( document.querySelector( '#matterTableControl' ) ).bootstrapTable('refresh');` try this — Vanojx1, Feb 16 '16 at 08:41
Ohhh thanks man @Vanjox.... Please send it in answer so i will mark it and upvote :) — Manjit Singh, Feb 16 '16 at 09:38

score 1 · Accepted Answer · answered Feb 16 '16 at 09:46

Bootstrap datatables ve a proper method to refresh the table:

angular.element( document.querySelector( '#matterTableControl' ) ).bootstrapTable('refresh');

it basically do this:

BootstrapTable.prototype.refresh = function (params) {
    if (params && params.url) {
        this.options.url = params.url;
        this.options.pageNumber = 1;
    }
    this.initServer(params && params.silent, params && params.query);
};

Example

score 1 · Answer 2 · answered Jul 29 '16 at 00:52

The best way to refresh data-url of bootstrap table is to use refresh method and

$table.bootstrapTable('refreshOptions', {url: 'new url'});
$table.bootstrapTable('refresh', {url: 'new url'});

If you don't doo refreshOptions then BootstrapTable still will use Old url for next refreshes. For example for pagination/sorting/search when server-side enabled.

Also if you have created table without JS then you could update URL in this way

$('#tableId').bootstrapTable('refreshOptions', {url: 'new url'});
$('#tableId').bootstrapTable('refresh', {url: 'new url'});

If you need to add loader icon, then you should add before calling refresh method, and delete loader icon with onLoadSuccess, onLoadError events.

The documentation: http://bootstrap-table.wenzhixin.net.cn/documentation/#methods

Reload the bootstrap datatable after every minute?

2 Answers2