Search code examples
jquerytablesorter

jQuery tablesorter - How to use stickyHeaders when the header items contain child tables?


For jQuery tablesorter 2.0 (https://mottie.github.io/tablesorter/docs/) when the tables header row contains child tables, the header values disappear when you start to scroll using stickyHeaders.

Using the stickyHeaders demo (https://mottie.github.io/tablesorter/docs/example-widget-sticky-header.html), the heading for "First Name" has been changed to have its own table:

<div class="narrow-block wrapper">
<table id="table2" class="tablesorter">
    <caption class="dark-row">Student Grades</caption>
    <thead>
        <tr><th>Account #</th><th><table><tr><td>First Name</td></tr></table></th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Diff</th></tr>
    </thead>
    <tbody>
        <tr><td>A43</td><td>Peter</td><td>Parker</td><td>28</td><td>9.99</td><td>20.3%</td><td>+3</td></tr>
        <tr><td>A255</td><td>John</td><td>Hood</td><td>33</td><td>19.99</td><td>25.1%</td><td>-7</td></tr>
        <tr><td>A33</td><td>Clark</td><td>Kent</td><td>18</td><td>15.49</td><td>44.2%</td><td>-13</td></tr>
        <tr><td>A11</td><td>Bruce</td><td>Almighty</td><td>45</td><td>153.19</td><td>44%</td><td>+19</td></tr>
        <tr><td>A102</td><td>Bruce</td><td>Evans</td><td>56</td><td>153.19</td><td>23%</td><td>+9</td></tr>
        <tr><td>A23</td><td>Mike</td><td>Peters</td><td>22</td><td>5.69</td><td>20.3%</td><td>+2</td></tr>
        <tr><td>A55</td><td>Leslie</td><td>Kent</td><td>33</td><td>15.99</td><td>25.1%</td><td>-3</td></tr>
        <tr><td>A3</td><td>Frank</td><td>Mint</td><td>44</td><td>12.59</td><td>44.2%</td><td>-12</td></tr>
        <tr><td>A21</td><td>Joe</td><td>Thomas</td><td>45</td><td>15.25</td><td>44%</td><td>+12</td></tr>
        <tr><td>A12</td><td>Tess</td><td>Evans</td><td>66</td><td>13.59</td><td>23%</td><td>+4</td></tr>
        <tr><td>A21</td><td>Peter</td><td>Dunn</td><td>12</td><td>2.99</td><td>21.1%</td><td>+2</td></tr>
        <tr><td>A33</td><td>Harry</td><td>Jones</td><td>13</td><td>19.49</td><td>22.2%</td><td>-6</td></tr>
        <tr><td>A13</td><td>John</td><td>James</td><td>16</td><td>13.89</td><td>42.1%</td><td>-13</td></tr>
        <tr><td>A71</td><td>Nick</td><td>Parker</td><td>45</td><td>13.89</td><td>44%</td><td>+29</td></tr>
        <tr><td>A21</td><td>Charles</td><td>Dunn</td><td>19</td><td>15.49</td><td>22%</td><td>+3</td></tr>
    </tbody>
</table>
</div>

With stickyHeaders when you scroll down, the column heading "First Name" is cleared out.

Thanks for the help!


Solution

  • The stickyHeaders widget was hiding extra theads and removing tbodys from the cloned sticky header table. I've tweaked the code to allow nested tables, but the change is currently only available in the master branch (demo). A new release will be available soon, once a few other bugs have been squashed.

    <thead>
      <tr>
        <th>
          <table>
            <thead>
              <tr>
                <th>test</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>test</td>
              </tr>
            </tbody>
          </table>
        </th>
        <th>...</th>
      </tr>
    </thead>