bootstrap-table icon indicating copy to clipboard operation
bootstrap-table copied to clipboard

On first page load data-filter-control doesn't work with bootstrap-table-cookie

Open bad-pooh opened this issue 3 years ago • 3 comments

Bootstraptable version(s) affected: 1.18.3

Description
The first time the page is loaded, cookies are not saved and the filter does not work until the first value is entered in the filter field and the page is reloaded.

Example
https://live.bootstrap-table.com/code/bad-pooh/6991

bad-pooh avatar May 31 '21 12:05 bad-pooh

Fixed here https://github.com/wenzhixin/bootstrap-table/pull/5583

djhvscf avatar Jul 20 '21 02:07 djhvscf

Fixed here #5583

Hi, I'm also trying to get filter-control working with bootstrap-table-cookie. I'm also facing the issue of not being able to use filter-control until the page is resubmitted with input (also notice that the clear search button seems to delete all bs.table cookies

How would I apply this fix? (sorry a bit new to this) I ran npm install --save wenzhixin/bootstrap-table#feature/multiselect-filtercontrol. I see my package.json changed to bootstrap-table": "github:wenzhixin/bootstrap-table#feature/multiselect-filtercontrol and node_modules/bootstrap-table/src/extensions/filter-control/bootstrap-table-filter-control.js seems to list version 3.0.0 (as seen in the changes on the branch). Should I still be installing from /dist or /src in my webpack.mix.js file? After recompiling it still seem to have the same behavior.

Thanks in advance for any help

PlaneNuts avatar Nov 06 '21 17:11 PlaneNuts

To add to the comment above. I think the issue I'm facing is due to using Data-Search with Data-Filter-Control. I tested with turning Data-Search=False and it looks like search is running on first page load. However, the old bug is still present if Data-Search=True. One other thing I notice is with Filter-Control enabled, the "clear search" button will remove ALL bs.table cookies (including .columns). This has the undesirable effect of also clearing column selections.

I think I might see what's going on, but I know close to nothing about JS so I could be wrong. It seems to be implemented correctly in the /src directory, but not in /dist

In bootstrap-table/dist/extensions/filter-control/bootstrap-table-filter-control.js on line 2245 I see the following. Line 3031 in the same file references this function in the clearFilterControl function

function collectBootstrapCookies() {
    var cookies = [];
    var foundCookies = document.cookie.match(/(?:bs.table.)(\w*)/g);
    var foundLocalStorage = localStorage;

    if (foundCookies) {
      $__default['default'].each(foundCookies, function (i, _cookie) {
        var cookie = _cookie;

        if (/./.test(cookie)) {
          cookie = cookie.split('.').pop();
        }

        if ($__default['default'].inArray(cookie, cookies) === -1) {
          cookies.push(cookie);
        }
      });
    }

In bootstrap-table/src/extensions/filter-control/utils.js it looks like the cookies are filtered to only clear the search cookies. This is referenced in bootstrap-table/src/extensions/filter-control/bootstrap-table-filter-control.js on line 386 under clearFilterControl

export function collectBootstrapTableFilterCookies () {
  const cookies = []
  const foundCookies = document.cookie.match(/bs\.table\.(filterControl|searchText)/g)
  const foundLocalStorage = localStorage

PlaneNuts avatar Nov 07 '21 18:11 PlaneNuts