Bootstrap-Table: Expand rows that are not hidden

Question

I have filters set up that will hide certain rows of my bootstrap-table. I have also implemented the "expandAllRows" method to display all detail-views; however, this method will expand ALL rows including those that are hidden by my filters.

How would I modify bootstrap-table.min.js in order to only show the detail-views of the rows that are visible?

I believe I need to modify the line from bootstrap-table.min.js but not sure how:

...{key:"expandAllRows",value:function(){for(var t=this.$body.find("> tr[data-index][data-has-detail-view]"),e=0;e<t.length;e++)this.expandRow(i.default(t[e[).data("index"))}...

I am using the bootstrap-table buttons method to add the custom buttons for expanding and collapsing the rows. See below:

function buttons() {
    var $table = $('#table')
    var $expand = $('#expand')
    var $collapse = $('#collapse')

    return {
        btnExpand: {
            text: 'Expand All Rows',
            icon: 'fas fa-angle-double-down',
            event: function() {
                $table.bootstrapTable('expandAllRows')
            },
            attributes: {
                title: 'Expand all rows'
            }
        },
        btnCollapse: {
            text: 'Collapse All Rows',
            icon: 'fas fa-angle-double-up',
            event: function() {
                $table.bootstrapTable('collapseAllRows')
            },
            attributes: {
                title: 'Collapse all rows'
            }
        }
    }
}

Answer 1

Rather than modify bootstraps' functions, maybe you could just circumvent them by renaming the attribute when you filter them. Something like this

function filter(keyword) {
  // your current filter logic, which hides the rows that don't match
  // in this example, you have hidden them with the class 'hidden-row' 
  let hiddenRows=$("tr.hidden-row[data-has-detail-view='true']");
  hiddenRows.each( function() {
     $(this).attr({
        'data-has-detail-view-hidden': 'true'
      })
      .removeAttr('data-has-detail-view');
  })
}

function clearFilters() {
// your logic, then
      let hiddenRows=$("tr.hidden-row[data-has-detail-view-hidden='true']");
      hiddenRows.each( function() {
         $(this).attr({
            'data-has-detail-view': 'true'
          })
          .removeAttr('data-has-detail-view-hidden')
          .removeClass('hidden-row');
      })
 }