jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v4.x)

# tablesorter

## jQuery Theme (Bootstrap v4.x)

### Flexible client-side table sorting

Back to documentation

- Go to Bootstrap v3.x or Bootstrap v2.x demo.
- Get the current version of Bootstrap (now v4.x).
- In v2.31.3, updated to Bootstrap 4.4.1.
- In v2.29.3
  - Updated to use Bootstrap v4.0.0-beta.2.
  - Updated theme v4 by changing `table-inverse` to `table-dark`.
  - Updated theme v4 by changing `thead-inverse` to `thead-dark`.
- In v2.29.0, updated to use Bootstrap v4.0.0-beta.
- In v2.28.4, added this Bootstrap v4.0.0-alpha.6 demo.
- Notes:
  - This version of the theme no longer requires the UITheme widget!
  - Bootstrap v4.x no longer includes fonts or images, so I didn't bother including Font Awesome icons on this demo page.
  - For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the Bootstrap v3.x demo.

# 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

    <!-- Bootstrap v4.x stylesheet -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <!-- bootstrap css theme -->
    <link rel="stylesheet" href="css/theme.bootstrap_4.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.tablesorter.js"></script>
    <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>
    <style>
    .tablesorter-pager .btn-group-sm .btn {
    	font-size: 1.2em; /* make pager arrows more visible */
    }
    </style>

## Javascript

## HTML

Next up: Bootstrap v3.x demo ››