Using Holmes with Pagination libraries

[pandafinity]

Hi :)

I have only just started using Holmes and find it easy to use and very 'Ronsil'.

The trouble I have is when I have a paginated list, Holmes seems to only search the rows that are visible - so I wanted to know if this was by design or something I have to overcome?

For Example - I am using the "jquery-paginate.js"

When you specify how many rows to display in each 'page' the visible rows are given the style attribute of style="display: table-row;" . The non-visible rows are given a style attribute of style="display: none;"

Holmes.js adds the classes 'visible' and 'hidden' as per the setup, but I am unsure whether Holmes actually searches 'rows' that are not displayed and wondered if this was an issue ?

Thanks for your help in advance.

[Haroenv]

Hey,

thanks for the gentle words. I was doubting in #77 how to implement paging, as in the case that every element is visible. Holmes currently can only work on elements that are in the DOM. I think in the case of jQuery-paginate it actually doesn’t put the elements in the DOM when they’re invisible.

I think most pagination solutions will use this method.

I chose for Holmes not to become too complicated by taking care of working with elements not in the DOM, so I don’t think it’s possible right now.

Could you make a codepen or jsbin for me to check out if your pagination method puts the elements in the DOM or not?

P.S.: someone I know implemented pagination+searching with listjs, so maybe that could help with you.

[pandafinity]

Hey,

Thanks for replying, I appreciate your time.

If it's ok I updated your code a little just for my purposes. The rows hidden when jquery-paginate.js kicks in all have 'display:none' for the row's style; with the visible rows style set as 'display:table-row'.

I added a little code in the showElement and clear functions.

showElement:

      // check elements hidden for pagination purposes
      if ((element.offsetWidth===0) && (element.offsetHeight===0)) {
        element.style = 'display:table-row';
        element.classList.add('searched');
      }

The style was needed for the pagination to make the row visible, and I added the 'searched' class just to track which rows I had made changes to.

I also added the follow code to the 'clear' function just to put all the rows back to pre-search status.
It's added to the looping of elements that have the 'visible' class.

clear:

          if (element.classList.contains('searched')) {
            element.classList.remove('searched');
            element.style = 'display:none';
          }

I may make the 'page numbers' from the paginator invisible while searching as it doesn't seem to refresh (though I could look at that I guess...).

But these little bits do the job for now.

Hope that's ok :)

[Haroenv]

Super, I'm glad you found a solution. Have a nice day 😄