Input filter control gets lost value after reloading data

[jarekherisz]

Bootstraptable version(s) affected

1.19.1

Description

When using "filter control" with data-url and data-side-pagination, the control clears its value after the server request is completed.

Example: https://live.bootstrap-table.com/code/jarekherisz/10259

I found reason in the file: bootstrap-table-filter-control.js The module is defined to rebuild the controls after each load:

It thing to me that this is the wrong approach and the cause of the problem. After commenting this line, the value of the input field does not reset after loading the data.

Example(s)

https://live.bootstrap-table.com/code/jarekherisz/10259

Possible Solutions

Maybe you have to consider whether these createControls are necessary in the case of load? If so, don't you need to store this value somewhere?

Additional Context

No response

[magostinelli]

I have the same problem, If i set data-side-pagination to client everything works as espected.

[manhart]

I have also commented the line. It solves even 2 problems. Once that the value is lost. Second, with FilterControl enabled, the bs-table always jumps to page 1 after clicking refresh button. Reproducible: https://live.bootstrap-table.com/code/manhart/10376 go to page 2 or 3 ... and click refresh. You will jump back to page 1. An undesirable behavior. But if I remove the line, it works fine.

[magostinelli]

I have also commented the line. It solves even 2 problems. Once that the value is lost. Second, with FilterControl enabled, the bs-table always jumps to page 1 after clicking refresh button. Reproducible: https://live.bootstrap-table.com/code/manhart/10376 go to page 2 or 3 ... and click refresh. You will jump back to page 1. An undesirable behavior. But if I remove the line, it works fine.

Which line did you comment?

[manhart]

The line that was mentioned above:

createControls(this, getControlContainer(this));

In the develop branch:

[martinbarilik]

This is a problem which occured after last update, waiting for fix since november :-/

[CosmoFox]

Any updates?

[jonatanschroeder]

I'm having the same issue. My current workaround is to save the values before refresh and restore them after (only works for input/select, not datepicker, and I don't think it would resolve the pagination issue):

              onRefresh: () => {
                  window.savedFilterValues = {};
                  $('.filter-control').find('input, select').each(function() {
                      const field_name = $(this).parents('[data-field]:first').data('field');
                      window.savedFilterValues[field_name] = $(this).val();
                  });
              },
              onSearch: () => {
                  if (window.savedFilterValues) {
                      for (const [field, value] of Object.entries(window.savedFilterValues)) {
                          $(`th[data-field=${field}]`).find('input, select').val(value);
                      }
                      window.savedFilterValues = false;
                  }
              },

While I see the rationale for not re-creating the controls, there is a use-case for re-creating (or at least re-populating) them: when the data is dynamic and the values to populate a select filter are changed by the newly loaded data. This was an issue I had in 1.18.3 which I was hopeful would be resolved in 1.19.1, but then this issue came as a result. So maybe the solution here is to update the select options (and restoring the old value if it is still valid after the update) instead of recreating the controls?

[wenzhixin]

Fixed this problem in our develop branch: https://live.bootstrap-table.com/code/wenzhixin/10790. PR #5583

[jonatanschroeder]

Fixed this problem in our develop branch: https://live.bootstrap-table.com/code/wenzhixin/10790. PR #5583

@wenzhixin I just tested the page you listed above, and filters don't seem to be working. Changing filter inputs doesn't affect the shown values, and the select for price doesn't have any options. Can you check? Or should this be a separate issue?

[albfan]

@jonatanschroeder @wenzhixin The problem was in put:

data-method="post"

and

data-filter-data="var:test"

This works as expected with develop branch:

https://live.bootstrap-table.com/code/albfan/11189

[albfan]

Looks the server side fails for integer values:

https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?limit=10&filter=%7B%22name%22%3A%220%22%7D

{"name":"0"}

works

but

https://examples.wenzhixin.net.cn/examples/bootstrap_table/data?limit=10&filter=%7B%22id%22%3A%220%22%7D

{"id":"0"}

shows:

TypeError: item[key].includes is not a function
   at /home/zhixin/www/blog/routes/examples.js:39:48
   at Array.filter (<anonymous>)
   at Object.data (/home/zhixin/www/blog/routes/examples.js:39:23)
   at module.exports (/home/zhixin/www/blog/routes/examples.js:81:48)
   at callbacks (/home/zhixin/www/blog/node_modules/express/lib/router/index.js:164:37)
   at param (/home/zhixin/www/blog/node_modules/express/lib/router/index.js:138:11)
   at param (/home/zhixin/www/blog/node_modules/express/lib/router/index.js:135:11)
   at param (/home/zhixin/www/blog/node_modules/express/lib/router/index.js:135:11)
   at pass (/home/zhixin/www/blog/node_modules/express/lib/router/index.js:145:5)
   at Router._dispatch (/home/zhixin/www/blog/node_modules/express/lib/router/index.js:173:5)

it is trying to use typical str includes for an integer

[jonatanschroeder]

@jonatanschroeder @wenzhixin The problem was in put:

data-method="post"

and

data-filter-data="var:test"

This works as expected with develop branch:

https://live.bootstrap-table.com/code/albfan/11189

Although the filters work as expected in your version, the select is being populated only with the data in the current page. Not sure if this should be considered a new issue or is part of the existing one, but just pointing out that this is probably not intended behaviour.

[albfan]

@jonatanschroeder if you want select to be populated with all the possible values, you need to provide a custom data to select, if no, the only option for filter control is to collect distinct values on paginated results.

https://bootstrap-table.com/docs/extensions/filter-control/#filterdatacollector

https://stackoverflow.com/questions/60366615/bootstrap-table-filter-extension-populates-select-with-complete-list-of-html-o

[jonatanschroeder]

@jonatanschroeder if you want select to be populated with all the possible values, you need to provide a custom data to select, if no, the only option for filter control is to collect distinct values on paginated results.

https://bootstrap-table.com/docs/extensions/filter-control/#filterdatacollector

https://stackoverflow.com/questions/60366615/bootstrap-table-filter-extension-populates-select-with-complete-list-of-html-o

Ah, right, that makes sense. I'm just not used to working with server-side pagination. That said, I imagine you mean https://bootstrap-table.com/docs/extensions/filter-control/#filterdata, not datacollector, right?