pager with stickyHeaders in thead

[ken-colvin]

If you use stickyHeaders and put the pager in thead instead of tfoot it is not rendering properly

Basically, I want to put the pager as the 1st row in THEAD and use stickyHeaders. When you filter or change page size, the pager seems to show the default pager options instead of the pager options inside .tablesorterPager({...});

Just move the pager HTML from TFOOT to THEAD

When you use example:

https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v4.html

OLD

<thead class="thead-dark"> <!-- add class="thead-light" for a light header -->
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th class="sorter-false filter-false">Geometry</th></tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
<!-- Move to THEAD -->
    <tr>
      <th colspan="7" class="ts-pager">
        <div class="form-inline">
          <div class="btn-group btn-group-sm mx-1" role="group">
            <button type="button" class="btn btn-secondary first" title="first">⇤</button>
            <button type="button" class="btn btn-secondary prev" title="previous">←</button>
          </div>
          <span class="pagedisplay"></span>
          <div class="btn-group btn-group-sm mx-1" role="group">
            <button type="button" class="btn btn-secondary next" title="next">→</button>
            <button type="button" class="btn btn-secondary last" title="last">⇥</button>
          </div>
          <select class="form-control-sm custom-select px-1 pagesize" title="Select page size">
            <option selected="selected" value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="all">All Rows</option>
          </select>
          <select class="form-control-sm custom-select px-4 mx-1 pagenum" title="Select page number"></select>
        </div>
      </th>
    </tr>
<!-- Move to THEAD -->
  </tfoot>

NEW:

<thead class="thead-dark"> <!-- add class="thead-light" for a light header -->

<!-- Moved from TFOOT to THEAD -->
      <th colspan="7" class="ts-pager">
        <div class="form-inline">
          <div class="btn-group btn-group-sm mx-1" role="group">
            <button type="button" class="btn btn-secondary first" title="first">⇤</button>
            <button type="button" class="btn btn-secondary prev" title="previous">←</button>
          </div>
          <span class="pagedisplay"></span>
          <div class="btn-group btn-group-sm mx-1" role="group">
            <button type="button" class="btn btn-secondary next" title="next">→</button>
            <button type="button" class="btn btn-secondary last" title="last">⇥</button>
          </div>
          <select class="form-control-sm custom-select px-1 pagesize" title="Select page size">
            <option selected="selected" value="10">10</option>
            <option value="20">20</option>
            <option value="30">30</option>
            <option value="all">All Rows</option>
          </select>
          <select class="form-control-sm custom-select px-4 mx-1 pagenum" title="Select page number"></select>
        </div>
      </th>
<!-- Moved from TFOOT to THEAD -->

    </tr>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th class="filter-select filter-exact" data-placeholder="Pick a gender">Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th class="sorter-false filter-false">Geometry</th></tr>
  </thead>
  <tfoot>
    <tr>
      <th>Name</th>
      <th>Major</th>
      <th>Sex</th>
      <th>English</th>
      <th>Japanese</th>
      <th>Calculus</th>
      <th>Geometry</th>
    </tr>
    <tr>

  </tfoot>

[Mottie]

Hi @ken-colvin!

The "new" html appears to be missing a <tr>:

<thead class="thead-dark">
  <tr class="tablesorter-ignoreRow"> <!-- this is missing -->
    <th colspan="7" class="ts-pager">

Also, you may need to add a class name to that tr so that the header row isn't treated like a clickable header; the class name can be modified using the cssIgnoreRow option

[Mottie]

Here's a demo