Bootstrap-Table Filter Control Header Row Refresh Issue

user_5349108 0
Viewed 325

I'm currently building an app that uses Bootstrap Table (https://bootstrap-table.com/) and its Filter Control extension so that each column has its own search field. Upon search, I am loading the results via the Bootstrap Table's AJAX option from the server. The problem I'm experiencing is that the header row containing the search fields appears to be refreshed as well which is causing issues while typing.

For instance, I have two columns, firstName and lastName. I'll type the firstName in and then use my mouse to switch to lastName. In the meantime the AJAX request starts. I then start typing the lastName to filter the results further. While still typing, the AJAX finishes and refreshes the table, including the header row containing the filter inputs. All letters I type during that process go lost and it feels kinda laggy as well. I've already implemented a throttle, but depending on the timing of typing in further filters, the issue still appears.

Is there any option to prevent this from happening, like only refreshing table contents, but not the table header row?

Thank you!

bootstrap-table bootstrap-4 html jquery javascript
1 Answers

As you mention a better option would be to always have the header on the page but only refresh the table body from the Ajax call leaving the header untouched.

In your success method on the Ajax call you can do any processing you need then update the HTML for the table body for example:

$('table tbody').html(result);
user_35599110
Related