# tablesorter

## jQuery Theme - Materialize

### Flexible client-side table sorting

Back to documentation

NOTE!

- Added Materialize theme style (v2.27.0 for materialize v0.97.7).
- Important Notes:
  - Any filter select is automatically hidden. It looks like javascript is needed to restyle the select, which this demo isn't using, so I had to include a `"browser-default"` class in the `filter_cssFilter` option to prevent it from being hidden.
  - The pager buttons are huge... I didn't see an option for small buttons, just button and large button.
  - Adding a `"input-field"` class to the filter row (it does wrap the inputs/select LOL), actually seems to break the desired action. The input turns white and the underline disappears. I guess I could just make the entire filter row white... I do miss the "x" inside the search input though.
- This demo shows how to get around an issue with the filter widget:
  - The zebra widget button below was added to show that when materialize's "striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css `nth-child()` selector.
  - To better understand this issue, disable the zebra widget (using the toggle button). Now
    in the "Calculus" column.
  - Try other filter searches with the zebra widget disabled, like
    in the "Sex" column.
  - To solve this issue, just enable the zebra widget and the "even" and "odd" row class names will should over-ride the `nth-child()` styling.
  - The only down side is that for custom materialize themes, you'll need to edit the "theme.materialize.css" file.

#### Demo

Reset filter :

Zebra widget :

Name | Major | Sex | English | Japanese | Calculus | Geometry
--- | --- | --- | --- | --- | --- | ---
Name | Major | Sex | English | Japanese | Calculus | Geometry
Student01 | Languages | male | 80 | 70 | 75 | 80
Student02 | Mathematics | male | 90 | 88 | 100 | 90
Student03 | Languages | female | 85 | 95 | 80 | 85
Student04 | Languages | male | 60 | 55 | 100 | 100
Student05 | Languages | female | 68 | 80 | 95 | 80
Student06 | Mathematics | male | 100 | 99 | 100 | 90
Student07 | Mathematics | male | 85 | 68 | 90 | 90
Student08 | Languages | male | 100 | 90 | 90 | 85
Student09 | Mathematics | male | 80 | 50 | 65 | 75
Student10 | Languages | male | 85 | 100 | 100 | 90
Student11 | Languages | male | 86 | 85 | 100 | 100
Student12 | Mathematics | female | 100 | 75 | 70 | 85
Student13 | Languages | female | 100 | 80 | 100 | 90
Student14 | Languages | female | 50 | 45 | 55 | 90
Student15 | Languages | male | 95 | 35 | 100 | 90
Student16 | Languages | female | 100 | 50 | 30 | 70
Student17 | Languages | female | 80 | 100 | 55 | 65
Student18 | Mathematics | male | 30 | 49 | 55 | 75
Student19 | Languages | male | 68 | 90 | 88 | 70
Student20 | Mathematics | male | 40 | 45 | 40 | 80
Student21 | Languages | male | 50 | 45 | 100 | 100
Student22 | Mathematics | male | 100 | 99 | 100 | 90
Student23 | Mathematics | male | 82 | 77 | 0 | 79
Student24 | Languages | female | 100 | 91 | 13 | 82
Student25 | Mathematics | male | 22 | 96 | 82 | 53
Student26 | Languages | female | 37 | 29 | 56 | 59
Student27 | Mathematics | male | 86 | 82 | 69 | 23
Student28 | Languages | female | 44 | 25 | 43 | 1
Student29 | Mathematics | male | 77 | 47 | 22 | 38
Student30 | Languages | female | 19 | 35 | 23 | 10
Student31 | Mathematics | male | 90 | 27 | 17 | 50
Student32 | Languages | female | 60 | 75 | 33 | 38
Student33 | Mathematics | male | 4 | 31 | 37 | 15
Student34 | Languages | female | 77 | 97 | 81 | 44
Student35 | Mathematics | male | 5 | 81 | 51 | 95
Student36 | Languages | female | 70 | 61 | 70 | 94
Student37 | Mathematics | male | 60 | 3 | 61 | 84
Student38 | Languages | female | 63 | 39 | 0 | 11
Student39 | Mathematics | male | 50 | 46 | 32 | 38
Student40 | Languages | female | 51 | 75 | 25 | 3
Student41 | Mathematics | male | 43 | 34 | 28 | 78
Student42 | Languages | female | 11 | 89 | 60 | 95
Student43 | Mathematics | male | 48 | 92 | 18 | 88
Student44 | Languages | female | 82 | 2 | 59 | 73
Student45 | Mathematics | male | 91 | 73 | 37 | 39
Student46 | Languages | female | 4 | 8 | 12 | 10
Student47 | Mathematics | male | 89 | 10 | 6 | 11
Student48 | Languages | female | 90 | 32 | 21 | 18
Student49 | Mathematics | male | 42 | 49 | 49 | 72
Student50 | Languages | female | 56 | 37 | 67 | 54

##### Page Header

    <!-- materialize stylesheet & icon font -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <!-- materialize theme -->
    <link rel="stylesheet" href="css/theme.materialize.css">

    <!-- tablesorter plugin -->
    <script src="js/jquery.tablesorter.js"></script>
    <!-- tablesorter widget file - loaded after the plugin -->
    <script src="js/jquery.tablesorter.widgets.js"></script>

    <!-- pager plugin -->
    <link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
    <script src="js/jquery.tablesorter.pager.js"></script>

##### Javascript

##### CSS

##### HTML