Bootstrap-table: How did I change the loading?

[marcelod]

Hi,
It's not just changing the message but making a call to a created loading, for example, calling a helper.startLoading();

[UtechtDustin]

As you can see here we currently call no functions, also we have no event for that.

As workaround you could listen on the loading element (changes on the display css prop).

@wenzhixin @djhvscf
What do you think, i think it could be a good feature to show custom spinner (overlays) on the whole table not just on the table itself.

[wenzhixin]

We can use $table.bootstrapTable('showLoading') to show the loading message.
https://examples.bootstrap-table.com/#methods/show-hide-loading.html
What do you mean like this? @marcelod

[UtechtDustin]

@wenzhixin
He want to use a function which is called when the loading starts/ends.
To show a external spinner as example: https://ihatetomatoes.net/demos/css3-preloader-transition/

[marcelod]

@wenzhixin I need is what the @UtechtDustin showed

[djhvscf]

My opinion is that we already have that functionality using showLoading / hideLoading. In the case this is needed then we can create a new option where we can define if the loading message overlays the whole table or it is inside the table.

[UtechtDustin]

@djhvscf I think you understand it wrong..
He wants two options where he can define a methods (like the defailformatter).
The method of the first option e.g. data-table-load-start will be called while the table start to load the data.
The second method of the second option e.g. data-table-load-end will be called while the table has loaded the data.

So he has show his own spinner/preloader or what ever he want to do while loading.

[marcelod]

Exactly what the @UtechtDustin said

[djhvscf]

Ok. Got it now. What about to listen the onprebody / onpostbody events?

[djhvscf]

What I mean is.. this is for me an edge case

[marcelod]

@djhvscf I understood what you said, but trying to use events didn't work

[djhvscf]

Why the events didn't work for you?

[wenzhixin]

A workaround: https://live.bootstrap-table.com/code/wenzhixin/3546

[wenzhixin]

Have you solved your problem?

[marcelod]

It has not yet solved the problem, because the way it showed only makes an action on success and not on the call, I keep testing.

[marcelod]

I managed using ajaxOptions

window.ajaxOptions = {
        beforeSend: function (xhr) {
            console.log('beforeSend')
            helper.startLoading();
        },
        complete: function () {
            console.log('complete')
            helper.stopLoading();
        }
    }

[UtechtDustin]

Thanks for the solution.