pagination button not work with load method

[takeAction]

Description

My case as follows:

I need to type something in a text input, and press enter to search.

If the result only has one record, then just take this result to text input; If there is more than one record, a modal dialog(with server side pagination) will be shown and I need to click one row to choose one record.

The search response looks like:

code:200
msg:"success"
data:[....]
total:100

the modal dialog is:

<div class="modal-body">             
                <table
                        data-toggle="table"
                        id="resultTable"
                        data-data-field="data"
                        data-page-size="25"
                        data-page-list="[25, 50, 100]"
                        data-side-pagination="server"
                        data-pagination="true"
                        data-query-params="queryParams" >
                    <thead>
                    <tr>
                        <th data-field="code" >Code</th>
                        <th data-field="name" data-width="50" data-width-unit="%">Name</th>
                        <th data-field="otherName" data-width="30" data-width-unit="%">Other Name</th>
                    </tr>
                    </thead>
                </table>
            </div>

the search function is:

        function search( param ) {

            axios.get( searchUrl, {params : param} )
                .then(function (response) {

                    if( response.data.total === 1 ) {

                        // take response result to input text directly
                    }else  if( response.data.total > 1 ) {
                        // response data includes data of page 1
                        $('#customerSearchDialog').modal('show');                      
                        $('#resultTable').bootstrapTable('load', response.data);

Now, if there is more than one record, a modal dialog will be shown and display the response data(data of page 1). However, if I click the pagination button, the data of modal dialog not changed, and there is no request to send to get new data, it still shows the initial data. How can I solve this problem?

If I replace $('#resultTable').bootstrapTable('load', response.data); with $('#resultTable').bootstrapTable('refresh', {url: searchUrl, pageNumber:1});, the pagination button works, but this cause sending get data of page 1 request twice(before show modal dialog and after show the modal dialog).

Example(s)

No response

[UtechtDustin]

Please provide us an example using our editor.

[takeAction]

@UtechtDustin Hi, please check this example: https://live.bootstrap-table.com/code/takeAction/14587, click the "Launch modal table" button to illustrate, Thanks! It seems that $table.bootstrapTable({url:"https://examples.wenzhixin.net.cn/examples/bootstrap_table/data"}) .bootstrapTable('load', data); doesn't set the data url successful.

[UtechtDustin]

You're setup is quite broken, you defined data-side-pagination="server", loads data via url and after that instantly load data with the load method.
You can't mix serverside (url and data-side-pagination="server") and clientside (load method).

So remove the side pagination and the url: https://live.bootstrap-table.com/code/UtechtDustin/14589 Or remove the load method: https://live.bootstrap-table.com/code/UtechtDustin/14590

[takeAction]

Thanks for your response!

1. for load, I didn't find it is for client side, thanks for your tip.
2. I need server side, but if I remove the load and add data-url, it will send the search request automatically after initiating this page, this is not what I want. What I expect is click the button to do search, if the result only has one record, modal dialog will not be shown and just take this record; if the result has more than one, modal dialog will be shown and display the search result.