Tablesorter: hide certain filter boxes when on mobile phones

Tablesorter: hide certain filter boxes when on mobile phones

Hi folks,

I'm using jQuery's Tablesorter v-2.31.3.

So essentially, I have a large table that doesn't quite fit nicely on mobile devices (too much columns of data). I've decided to hide columns using a CSS class I created "hideme" :

  1. <style>
  2. /* CSS Specific for phones, tablets, etc.  */
  3. @media only screen and (max-width: 767.98px){
  4.   .hidemeOnPhones {
  5.     display: none;
  6.   }
  7. }
  8. </style>

I've added class="hidemeOnPhones" to all of my table's TD's and TH's I don't want showing up when viewing the page on smartphones...

That works as planned.HOWEVER, my page is still somewhat broken. For one thing, it seems like the filter boxes for all columns I've hidden still exists, as if the tablesorter still counted them in... I get this:

So, I also tried appending this 'hidemeOnPhones' class to my last 4 columns in my filter_cssFilter:

  1. filter_cssFilter: [
  2.   'form-control form-control-sm',
  3.   'form-control form-control-sm',
  4.   'custom-select custom-select-sm', 
  5.   'form-control form-control-sm',
  6.   'form-control form-control-sm',
  7.   'form-control form-control-sm hidemeOnPhones',
  8.   'form-control form-control-sm hidemeOnPhones',
  9.   'form-control form-control-sm hidemeOnPhones',
  10.   'form-control form-control-sm hidemeOnPhones'
  11. ],

Now, I get this: 

The filter's last 4 input boxes don't show up, but still, I have a spanning problem here...

Yet, I don't think putting 'hidemeOnPhones' on my last 4 entries of filter_cssFilter is the best thing... 

Note that I'm also using the tablersorter.Pager. And, this pager is on the table's footer:

  1. <tfoot>
  2.   <tr>
  3.     <th colspan="100%" class="ts-pager">
  4.       ....
  5.     </th>
  6.   </tr>
  7. </tfoot>

I've noticed that if I force my pager's row with a colspan="5" (number of columns shown in phones), then it's perfect: 

I've tried to also add a custom CSS class in my pager's cell that would take care of changing colspan, but whatever I found doesn't change my colspan at all, regardless which browsers...

  1. <style>
  2. @media only screen and (max-width: 767.98px){
  3.   .setPagerColSpan {
  4.     column-span: 3; /* W3C */
  5.     -webkit-column-span: 3; /* Safari & Chrome */
  6.     -moz-column-span: 3; /* Firefox */
  7.     -ms-column-span: 3; /* Internet Explorer */
  8.     -o-column-span: 3; /* Opera */
  9.    }
  10. }
  11. </style>

So, wondering if there's a way I could do this properly with what tablesorter has to offer?

Thanks for you time and help!

Cheers. Pat