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

How can I run a function *exclusive* to `onColumnSearch` or `onSearch`?

Open hepcat72 opened this issue 7 months ago • 4 comments

Description

I want to run different javascript functions that are specific to either a whole table search or a column search, but when I try to use onSearch and onColumnSearch for that, the onSearch event gets triggered whenever an onColumnSearch is triggered. In other words, if the user enters a column search term, I don't want to run the function associated with an onSearch event, but that's what happens. I understand the thinking behind it, so I'm not saying that the behavior is wrong. I just would like to know how to distinguish the originating event - the event that triggered the search. And I can't base it on a search term change, because I want to capture the event where the user has clicked the trash can button when there is no search term in the input field associated with the table search (so that search term goes from empty string to empty string).

I was thinking that I could check all the values in the column filter inputs in an onSearch event, but I thought I would ask if there is a way to know what the originating event was (a column search or a "table search").

Example(s)

Open the console and then enter a column search term (e.g. search for '1' in the 'Item Name' column) and observe the 2 log prints. How can I run only the function associated with onColumnSearch and not subsequently run the onSearch associated function

https://live.bootstrap-table.com/code/hepcat72/18972

hepcat72 avatar Jul 11 '25 14:07 hepcat72

Oh, the other thing is that onSearch is also triggering when I uncheck the checkbox associated with onColumnSwitchAll, which I don't want to happen either.

hepcat72 avatar Jul 11 '25 14:07 hepcat72

E.g. how can I tell the difference between an onSearch event triggered by clicking the trash button (when there is no search term in the table search input field) versus one triggered by having entered a column search term in one of the column filter input fields?

hepcat72 avatar Jul 11 '25 14:07 hepcat72

...or an onSearch event triggered after a column switch event versus clicking the trash button? I feel like I must be missing something.

hepcat72 avatar Jul 11 '25 14:07 hepcat72

Here's how I have managed to work around this issue, however it uses timers, so if the user is too fast, this can fail...

  var doingNonTableSearch = false
  $(jqTableID).bootstrapTable({
    onSearch: function (searchTerm) {
        if (searchTermChanged(searchTerm)) {
          doThingOne()
        } else if (searchTerm === '' && !doingNonTableSearch) {
          doThingTwo()
        }
    },
    onColumnSearch: function (columnName, searchTerm) {
        if (columnSearchTermChanged(columnName, searchTerm)) {
          doingNonTableSearch = true
          doThingThree()
          setTimeout(function () { doingNonTableSearch = false }, 1000)
        }
      }
    },
    onColumnSwitch: function (columnName, visible) {
      doingNonTableSearch = true
      doThingFour()
      setTimeout(function () { doingNonTableSearch = false }, 1000)
    },
    onColumnSwitchAll: function (visible) {
      doingNonTableSearch = true
      doThingFive()
      setTimeout(function () { doingNonTableSearch = false }, 1000)
    }
  })

This way, doThingTwo() only fires if the user actually clicked the trash button (and not when a column filter event or switch event happens).

hepcat72 avatar Jul 11 '25 15:07 hepcat72