mirror of
https://github.com/Mottie/tablesorter.git
synced 2025-01-12 15:24:21 +00:00
Theme: Add demo for Bootstrap v4-alpha
This commit is contained in:
Rob Garrison
parent
d9b8c1feb3
commit
ca2e7acbf4
@ -23,7 +23,7 @@ tablesorter (FORK) is a jQuery plugin for turning a standard HTML table with THE
|
||||
|
||||
* Multi-column alphanumeric sorting and filtering.
|
||||
* Multi-tbody sorting - see the [options](https://mottie.github.io/tablesorter/docs/index.html#options) table on the main document page.
|
||||
* Supports [Bootstrap v2 and 3](https://mottie.github.io/tablesorter/docs/example-widget-bootstrap-theme.html).
|
||||
* Supports [Bootstrap v2-4](https://mottie.github.io/tablesorter/docs/example-option-theme-bootstrap-v3.html).
|
||||
* Parsers for sorting text, alphanumeric text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats) & time. [Add your own easily](https://mottie.github.io/tablesorter/docs/example-parsers.html).
|
||||
* Inline editing - see [demo](https://mottie.github.io/tablesorter/docs/example-widget-editable.html).
|
||||
* Support for ROWSPAN and COLSPAN on TH elements.
|
||||
|
||||
@ -1,7 +1,9 @@
|
||||
/*************
|
||||
Bootstrap theme
|
||||
*************/
|
||||
/* jQuery Bootstrap Theme */
|
||||
/**
|
||||
* Bootstrap theme v3.x
|
||||
*
|
||||
* WARNING!... once a stable Bootstrap v4.x is released,
|
||||
* this file will be removed; use theme.bootstrap_3.css
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@ -1,7 +1,6 @@
|
||||
/*************
|
||||
Bootstrap 2 Theme
|
||||
*************/
|
||||
/* jQuery Bootstrap 2 Theme */
|
||||
/**
|
||||
* Bootstrap theme v2.x
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
190
css/theme.bootstrap_3.css
Normal file
190
css/theme.bootstrap_3.css
Normal file
@ -0,0 +1,190 @@
|
||||
/**
|
||||
* Bootstrap theme v3.x
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
.tablesorter-bootstrap thead th,
|
||||
.tablesorter-bootstrap thead td,
|
||||
.tablesorter-bootstrap tfoot th,
|
||||
.tablesorter-bootstrap tfoot td {
|
||||
font: 14px/20px Arial, Sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
margin: 0 0 18px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-bootstrap .sorter-false {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header.sorter-false i.tablesorter-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header-inner {
|
||||
position: relative;
|
||||
padding: 4px 18px 4px 4px;
|
||||
}
|
||||
.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* bootstrap uses <i> for icons */
|
||||
.tablesorter-bootstrap .tablesorter-header i.tablesorter-icon {
|
||||
font-size: 11px;
|
||||
position: absolute;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
margin-top: -7px; /* half the icon height; older IE doesn't like this */
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
background-repeat: no-repeat;
|
||||
line-height: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* black unsorted icon */
|
||||
.tablesorter-bootstrap .bootstrap-icon-unsorted {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAA20lEQVR4AWJABpKSkoxALCstLb0aUAsZaCAMhVEY6B0amx8YZWDDEDSBa2AGe7XeIiAAClYwVGBvsAcIllsf/mvcC9DgOOd8h90fxWvngVEUbZIkuWRZZlE8eQjcisgZMM9zi+LJ6ZfwegmWZflZDugdHMfxTcGqql7TNBlUB/QObtv2VBSFrev6OY7jngzFk9OT/fn73fWYpqnlXNyXDMWT0zuYx/Bvel9ej+LJ6R08DMOu67q7DkTkrSA5vYPneV71fX/QASdTkJwezhs0TfMARn0wMDDGXEPgF4oijqwM5YjNAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
/* white unsorted icon */
|
||||
.tablesorter-bootstrap .icon-white.bootstrap-icon-unsorted {
|
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAOCAYAAAD5YeaVAAAAe0lEQVR4AbXQoRWDMBiF0Sh2QLAAQ8SxJGugWSA6A2STW1PxTsnB9cnkfuYvv8OGC1t5G3Y0QMP+Bm857keAdQIzWBP3+Bw4MADQE18B6/etRnCV/w9nnGuLezfAmXhABGtAGIkruvk6auIFRwQJDywllsEAjCecB20GP59BQQ+gtlRLAAAAAElFTkSuQmCC);
|
||||
}
|
||||
|
||||
/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
|
||||
.tablesorter-bootstrap > tbody > tr.odd > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.hover > td,
|
||||
.tablesorter-bootstrap > tbody > tr.odd:hover > td,
|
||||
.tablesorter-bootstrap > tbody > tr.even:hover > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.even > td,
|
||||
.tablesorter-bootstrap > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* processing icon */
|
||||
.tablesorter-bootstrap .tablesorter-processing {
|
||||
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
|
||||
background-position: center center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.primary {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.primary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.primary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.secondary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.secondary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.secondary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr.odd td.tertiary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap > tbody > tr td.tertiary,
|
||||
.tablesorter-bootstrap > tbody > tr.even td.tertiary {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.caption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter {
|
||||
width: 98%;
|
||||
margin: 0;
|
||||
padding: 4px 6px;
|
||||
color: #333;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled {
|
||||
background-color: #eee;
|
||||
color: #555;
|
||||
cursor: not-allowed;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
box-sizing: border-box;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row td {
|
||||
background-color: #efefef;
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
padding: 4px 6px;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
|
||||
padding: 2px; /* change this to modify the thickness of the closed border row */
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* rows hidden by filtering */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* pager plugin */
|
||||
.tablesorter-bootstrap .tablesorter-pager select {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
|
||||
border: 0;
|
||||
}
|
||||
/* tfoot i for pager controls */
|
||||
.tablesorter-bootstrap tfoot i {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
}
|
||||
189
css/theme.bootstrap_4.css
Normal file
189
css/theme.bootstrap_4.css
Normal file
@ -0,0 +1,189 @@
|
||||
/**
|
||||
* Bootstrap theme v4.x
|
||||
*/
|
||||
.tablesorter-bootstrap {
|
||||
width: 100%;
|
||||
}
|
||||
.tablesorter-bootstrap thead th,
|
||||
.tablesorter-bootstrap thead td,
|
||||
.tablesorter-bootstrap tfoot th,
|
||||
.tablesorter-bootstrap tfoot td {
|
||||
font: 14px/20px Arial, Sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
margin: 0 0 18px;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap thead .tablesorter-header {
|
||||
background-position: right 5px center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
white-space: normal;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) thead:not(.thead-inverse) .tablesorter-header,
|
||||
.tablesorter-bootstrap:not(.table-inverse) tfoot th,
|
||||
.tablesorter-bootstrap:not(.table-inverse) tfoot td {
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap thead .sorter-false {
|
||||
cursor: default;
|
||||
background-image: none;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-header-inner {
|
||||
position: relative;
|
||||
padding: 4px 18px 4px 4px;
|
||||
}
|
||||
.tablesorter-bootstrap .sorter-false .tablesorter-header-inner {
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
/* black icons */
|
||||
.tablesorter-bootstrap thead .tablesorter-headerUnSorted:not(.sorter-false) {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead .tablesorter-headerAsc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead .tablesorter-headerDesc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
|
||||
}
|
||||
|
||||
/* white icons */
|
||||
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerUnSorted:not(.sorter-false),
|
||||
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerUnSorted:not(.sorter-false) {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE0IDIwIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgMTNsLTIuNS0yLjVMNyAxNWwtNC41LTQuNUwwIDEzbDcgN3pNMTQgNy41TDExLjUgMTAgNyA1LjUgMi41IDEwIDAgNy41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerAsc,
|
||||
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerAsc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgOS41TDExLjUgMTIgNyA3LjUgMi41IDEyIDAgOS41bDctN3oiLz48L3N2Zz4=);
|
||||
}
|
||||
.tablesorter-bootstrap thead.thead-inverse .tablesorter-headerDesc,
|
||||
.tablesorter-bootstrap.table-inverse thead .tablesorter-headerDesc {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDE0IDE0Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMTQgNWwtMi41LTIuNS00LjUgNC41LTQuNS00LjVMMCA1IDcgMTJ6Ii8+PC9zdmc+);
|
||||
}
|
||||
|
||||
/* since bootstrap (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.hover > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd:hover > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even:hover > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even > td,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* processing icon */
|
||||
.tablesorter-bootstrap .tablesorter-processing {
|
||||
background-image: url('data:image/gif;base64,R0lGODlhFAAUAKEAAO7u7lpaWgAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQBCgACACwAAAAAFAAUAAACQZRvoIDtu1wLQUAlqKTVxqwhXIiBnDg6Y4eyx4lKW5XK7wrLeK3vbq8J2W4T4e1nMhpWrZCTt3xKZ8kgsggdJmUFACH5BAEKAAIALAcAAAALAAcAAAIUVB6ii7jajgCAuUmtovxtXnmdUAAAIfkEAQoAAgAsDQACAAcACwAAAhRUIpmHy/3gUVQAQO9NetuugCFWAAAh+QQBCgACACwNAAcABwALAAACE5QVcZjKbVo6ck2AF95m5/6BSwEAIfkEAQoAAgAsBwANAAsABwAAAhOUH3kr6QaAcSrGWe1VQl+mMUIBACH5BAEKAAIALAIADQALAAcAAAIUlICmh7ncTAgqijkruDiv7n2YUAAAIfkEAQoAAgAsAAAHAAcACwAAAhQUIGmHyedehIoqFXLKfPOAaZdWAAAh+QQFCgACACwAAAIABwALAAACFJQFcJiXb15zLYRl7cla8OtlGGgUADs=');
|
||||
background-position: center center !important;
|
||||
background-repeat: no-repeat !important;
|
||||
}
|
||||
|
||||
/* Column Widget - column sort colors */
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.primary {
|
||||
background-color: #bfbfbf;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.primary,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.primary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.secondary {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.secondary,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.secondary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.odd td.tertiary {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr td.tertiary,
|
||||
.tablesorter-bootstrap:not(.table-inverse) > tbody > tr.even td.tertiary {
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.tablesorter-bootstrap:not(.table-inverse) .caption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-bootstrap .tablesorter-filter-row select.tablesorter-filter {
|
||||
width: 98%;
|
||||
margin: 0;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: height 0.1s ease;
|
||||
-moz-transition: height 0.1s ease;
|
||||
-o-transition: height 0.1s ease;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row select.tablesorter-filter {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-filter-row .tablesorter-filter.disabled {
|
||||
cursor: not-allowed;
|
||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.075) inset;
|
||||
box-sizing: border-box;
|
||||
transition: height 0.1s ease;
|
||||
}
|
||||
|
||||
.tablesorter-bootstrap:not(.table-inverse) .tablesorter-filter-row td {
|
||||
line-height: normal;
|
||||
text-align: center;
|
||||
padding: 4px 6px;
|
||||
vertical-align: middle;
|
||||
-webkit-transition: line-height 0.1s ease;
|
||||
-moz-transition: line-height 0.1s ease;
|
||||
-o-transition: line-height 0.1s ease;
|
||||
transition: line-height 0.1s ease;
|
||||
}
|
||||
/* hidden filter row */
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme td {
|
||||
padding: 2px; /* change this to modify the thickness of the closed border row */
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.tablesorter-bootstrap .tablesorter-filter-row.hideme * {
|
||||
height: 1px;
|
||||
min-height: 0;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
/* don't use visibility: hidden because it disables tabbing */
|
||||
opacity: 0;
|
||||
filter: alpha(opacity=0);
|
||||
}
|
||||
/* rows hidden by filtering */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* pager plugin */
|
||||
|
||||
.tablesorter-bootstrap .tablesorter-pager .pagedisplay {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter:not(.table-inverse) .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
}
|
||||
6
docs/css/bootstrap-v4.min.css
vendored
Normal file
6
docs/css/bootstrap-v4.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -181,7 +181,7 @@ table.focus-highlight td:before {
|
||||
</li>
|
||||
<li>To add <strong class="hover-hl">Hover</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to enable hover row and column highlighting.</li>
|
||||
<li>Add a class name of <code>"<span class="hover-hl">hover-highlight</span>"</code> to the <code>table</code> to enable hover row and column highlighting.</li>
|
||||
<li>Include the CSS shown on this page.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
<li>Modify the hover highlight row and/or column color definitions as desired (they can be different colors).</li>
|
||||
@ -190,7 +190,7 @@ table.focus-highlight td:before {
|
||||
</li>
|
||||
<li>To add <strong class="focus-hl">Focus</strong> Highlighting:
|
||||
<ul>
|
||||
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to enable focused cell with row and column highlighting.</li>
|
||||
<li>Add a class name of <code>"<span class="focus-hl">focus-highlight</span>"</code> to the <code>table</code> to enable focused cell with row and column highlighting.</li>
|
||||
<li>Click on a table cell in the demo below to see the highlight; only <em>one element</em>, per page, can be active at a time.</li>
|
||||
<li>Include the CSS and the extra javascript shown on this page to make table cells focusable.</li>
|
||||
<li>If needed, modify the table background color & zebra striping row colors.</li>
|
||||
@ -321,6 +321,15 @@ table.focus-highlight td:before {
|
||||
</div>
|
||||
<br class="clear"/>
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Add any theme; the css for highlighting may need modification
|
||||
to match the selected theme, if it isn't the "blue" theme -->
|
||||
<link href="css/theme.blue.css" rel="stylesheet">
|
||||
<script src="js/jquery.min.js"></script>
|
||||
<script src="js/jquery.tablesorter.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h1>CSS</h1>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v2.x)</title>
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v2.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
@ -26,7 +26,7 @@
|
||||
<script id="js">$(function() {
|
||||
|
||||
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
|
||||
// file for Bootstrap v3.x; it is included here to show how you can modify the default classes
|
||||
// file for Bootstrap v3.x; it is included here because of class name differences in Bootstrap v2
|
||||
// for version 2.x (the iconSortAsc & iconSortDesc use different classes)
|
||||
$.tablesorter.themes.bootstrap = {
|
||||
// these classes are added to the table. To see other table classes available,
|
||||
@ -56,7 +56,7 @@
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
theme : "bootstrap", // version 2!!
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
@ -142,7 +142,7 @@
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (Bootstrap v2.x)</h2>
|
||||
<h2>Bootstrap v2.x Theme (requires UITheme Widget)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
@ -153,10 +153,11 @@
|
||||
<span class="label label-info">NOTE!</span>
|
||||
</p>
|
||||
<ul>
|
||||
<li>Go to <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> or <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> demo.<br><br></li>
|
||||
<li>In <span class="version updated">v2.28.4</span>, added support for the column widget.</li>
|
||||
<li>This demo uses <a href="http://getbootstrap.com/2.3.2/">Bootstrap v2.x</a> (v2.3.2 specifically).</li>
|
||||
<li>Hover over the thick grey bar under the header to reveal the filter row.</li>
|
||||
<li>For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x demo</a>.</li>
|
||||
<li>For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x demo</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
@ -267,10 +268,13 @@
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<!-- bootstrap widget theme -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap_2.css">
|
||||
|
||||
<!-- load jQuery first -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
343
docs/example-option-theme-bootstrap-v3.html
Normal file
343
docs/example-option-theme-bootstrap-v3.html
Normal file
@ -0,0 +1,343 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v3.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
|
||||
// file; it is included here to show how you can modify the default classes
|
||||
$.tablesorter.themes.bootstrap = {
|
||||
// these classes are added to the table. To see other table classes available,
|
||||
// look here: http://getbootstrap.com/css/#tables
|
||||
table : 'table table-bordered table-striped',
|
||||
caption : 'caption',
|
||||
// header class names
|
||||
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
|
||||
sortNone : '',
|
||||
sortAsc : '',
|
||||
sortDesc : '',
|
||||
active : '', // applied when column is sorted
|
||||
hover : '', // custom css required - a defined bootstrap style may not override other classes
|
||||
// icon class names
|
||||
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
|
||||
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
|
||||
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
|
||||
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
|
||||
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
|
||||
footerRow : '',
|
||||
footerCells : '',
|
||||
even : '', // even row zebra striping
|
||||
odd : '' // odd row zebra striping
|
||||
};
|
||||
|
||||
// call the tablesorter plugin and apply the uitheme widget
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "columns", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// class names added to columns when sorted
|
||||
columns: [ "primary", "secondary", "tertiary" ],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
filter_cssFilter: "form-control",
|
||||
|
||||
// set the uitheme widget to use the bootstrap theme class names
|
||||
// this is no longer required, if theme is set
|
||||
// ,uitheme : "bootstrap"
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
// if (t) {
|
||||
// removing classes applied by the zebra widget
|
||||
// you shouldn't ever need to use this code, it is only for this demo
|
||||
// $('table').find('tr').removeClass('odd even');
|
||||
// }
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>Bootstrap v3.x Theme (requires UITheme Widget)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="alert alert-danger" role="alert">
|
||||
<p><strong>WARNING!</strong>: Bootstrap v.3x theme file was renamed to <code>theme.bootstrap_3.css</code>; a copy named <code>theme.bootstrap.css</code> will be maintained for about 6 months after a stable release of Bootstrap v4.x is available!</p>
|
||||
<p><code>theme.bootstrap_4.css</code> currently contains the theme styling for Bootstrap v4.x.</p>
|
||||
</div>
|
||||
<ul>
|
||||
<li>Go to <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> or <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> demo.<br><br></li>
|
||||
|
||||
<li>In <span class="version updated">v2.28.4</span>
|
||||
<ul>
|
||||
<li>Added support for the column widget.</li>
|
||||
<li>Added <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> demo.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
|
||||
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
|
||||
<li>And of course include the necessary Bootstrap image or font).</li>
|
||||
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
|
||||
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-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 <code>nth-child()</code> selector.</li>
|
||||
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-sm btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
||||
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-sm btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
|
||||
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
|
||||
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table> <!-- bootstrap classes added by the uitheme widget -->
|
||||
<thead>
|
||||
<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>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>
|
||||
<th colspan="7" class="ts-pager form-inline">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-default first"><span class="glyphicon glyphicon-step-backward"></span></button>
|
||||
<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>
|
||||
</div>
|
||||
<span class="pagedisplay"></span>
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>
|
||||
<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>
|
||||
</div>
|
||||
<select class="form-control input-sm 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 input-sm pagenum" title="Select page number"></select>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap v3.x stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<!-- bootstrap widget theme - **** RENAMED TO theme.bootstrap_3.css **** -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap_3.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></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h2>HTML</h2>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x demo ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
286
docs/example-option-theme-bootstrap-v4.html
Normal file
286
docs/example-option-theme-bootstrap-v4.html
Normal file
@ -0,0 +1,286 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v4.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v4.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap_4.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<style>
|
||||
.tablesorter-pager .btn-group-sm .btn {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
// the uitheme widget is NOT REQUIRED!
|
||||
widgets : [ "filter", "columns", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// class names added to columns when sorted
|
||||
columns: [ "primary", "secondary", "tertiary" ],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
filter_cssFilter: [
|
||||
'form-control',
|
||||
'form-control',
|
||||
'form-control custom-select', // select needs custom class names :(
|
||||
'form-control',
|
||||
'form-control',
|
||||
'form-control',
|
||||
'form-control'
|
||||
]
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["filter"] : ["filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery Theme (Bootstrap v4.x)</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
|
||||
<div id="main">
|
||||
|
||||
<div class="alert alert-warning" role="alert">
|
||||
<strong>NOTE!</strong>: Bootstrap v4.x is still in alpha development. Do not use it, or the <code>theme.bootstrap_4.css</code> theme file in production until a stable release is available.
|
||||
</div>
|
||||
|
||||
<ul>
|
||||
<li>Go to <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> or <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> demo.<br><br></li>
|
||||
|
||||
<li>In <span class="version updated">v2.28.4</span>, added this Bootstrap v4.x demo.</li>
|
||||
<li>This demo uses <a href="https://v4-alpha.getbootstrap.com/">Bootstrap v4.x</a> (currently v4.0.0-alpha.6).</li>
|
||||
<li>This version of the theme <strong>no longer requires the UITheme widget</strong>!</li>
|
||||
<li>For more information like revision history of this theme & why there is a button to enable/disable the zebra widget, please see the <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x demo</a>.</li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter="">Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table class="table table-bordered table-striped">
|
||||
<thead> <!-- add class="thead-inverse" for a dark 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>
|
||||
<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>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- 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></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h2>HTML</h2>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme-v3.html">Bootstrap v3.x demo ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -2,150 +2,19 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - jQuery UITheme Widget (Bootstrap v3.x)</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-1.4.4.min.js"></script>
|
||||
<title>jQuery tablesorter 2.0 - Bootstrap Themes</title>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
<script src="js/prettify.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/docs.js"></script>
|
||||
|
||||
<!-- Tablesorter: required for bootstrap -->
|
||||
<link rel="stylesheet" href="../css/theme.bootstrap.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
|
||||
// file; it is included here to show how you can modify the default classes
|
||||
$.tablesorter.themes.bootstrap = {
|
||||
// these classes are added to the table. To see other table classes available,
|
||||
// look here: http://getbootstrap.com/css/#tables
|
||||
table : 'table table-bordered table-striped',
|
||||
caption : 'caption',
|
||||
// header class names
|
||||
header : 'bootstrap-header', // give the header a gradient background (theme.bootstrap_2.css)
|
||||
sortNone : '',
|
||||
sortAsc : '',
|
||||
sortDesc : '',
|
||||
active : '', // applied when column is sorted
|
||||
hover : '', // custom css required - a defined bootstrap style may not override other classes
|
||||
// icon class names
|
||||
icons : '', // add "icon-white" to make them white; this icon class is added to the <i> in the header
|
||||
iconSortNone : 'bootstrap-icon-unsorted', // class name added to icon when column is not sorted
|
||||
iconSortAsc : 'glyphicon glyphicon-chevron-up', // class name added to icon when column has ascending sort
|
||||
iconSortDesc : 'glyphicon glyphicon-chevron-down', // class name added to icon when column has descending sort
|
||||
filterRow : '', // filter row class; use widgetOptions.filter_cssFilter for the input/select element
|
||||
footerRow : '',
|
||||
footerCells : '',
|
||||
even : '', // even row zebra striping
|
||||
odd : '' // odd row zebra striping
|
||||
};
|
||||
|
||||
// call the tablesorter plugin and apply the uitheme widget
|
||||
$("table").tablesorter({
|
||||
// this will apply the bootstrap theme if "uitheme" widget is included
|
||||
// the widgetOptions.uitheme is no longer required to be set
|
||||
theme : "bootstrap",
|
||||
|
||||
widthFixed: true,
|
||||
|
||||
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
|
||||
|
||||
// widget code contained in the jquery.tablesorter.widgets.js file
|
||||
// use the zebra stripe widget if you plan on hiding any rows (filter widget)
|
||||
widgets : [ "uitheme", "filter", "columns", "zebra" ],
|
||||
|
||||
widgetOptions : {
|
||||
// using the default zebra striping class name, so it actually isn't included in the theme variable above
|
||||
// this is ONLY needed for bootstrap theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// class names added to columns when sorted
|
||||
columns: [ "primary", "secondary", "tertiary" ],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
filter_cssFilter: "form-control",
|
||||
|
||||
// set the uitheme widget to use the bootstrap theme class names
|
||||
// this is no longer required, if theme is set
|
||||
// ,uitheme : "bootstrap"
|
||||
|
||||
}
|
||||
})
|
||||
.tablesorterPager({
|
||||
|
||||
// target the pager markup - see the HTML block below
|
||||
container: $(".ts-pager"),
|
||||
|
||||
// target the pager page select dropdown - choose a page
|
||||
cssGoto : ".pagenum",
|
||||
|
||||
// remove rows from the table to speed up the sort of large tables.
|
||||
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
||||
removeRows: false,
|
||||
|
||||
// output string - default is '{page}/{totalPages}';
|
||||
// possible variables: {page}, {totalPages}, {filteredPages}, {startRow}, {endRow}, {filteredRows} and {totalRows}
|
||||
output: '{startRow} - {endRow} / {filteredRows} ({totalRows})'
|
||||
|
||||
});
|
||||
|
||||
});</script>
|
||||
|
||||
<script>
|
||||
$(function(){
|
||||
|
||||
// filter button demo code
|
||||
$('button.filter').click(function(){
|
||||
var col = $(this).data('column'),
|
||||
txt = $(this).data('filter');
|
||||
$('table').find('.tablesorter-filter').val('').eq(col).val(txt);
|
||||
$('table').trigger('search', false);
|
||||
return false;
|
||||
});
|
||||
|
||||
// toggle zebra widget
|
||||
$('button.zebra').click(function(){
|
||||
var t = $(this).hasClass('btn-success');
|
||||
// if (t) {
|
||||
// removing classes applied by the zebra widget
|
||||
// you shouldn't ever need to use this code, it is only for this demo
|
||||
// $('table').find('tr').removeClass('odd even');
|
||||
// }
|
||||
$('table')
|
||||
.toggleClass('table-striped')[0]
|
||||
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('btn-danger btn-success')
|
||||
.find('i')
|
||||
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
|
||||
.find('span')
|
||||
.text(t ? 'disabled' : 'enabled');
|
||||
$('table').trigger('refreshWidgets', [false]);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="banner">
|
||||
<h1>table<em>sorter</em></h1>
|
||||
<h2>jQuery UITheme Widget (Bootstrap v3.x)</h2>
|
||||
<h2>Bootstrap Themes</h2>
|
||||
<h3>Flexible client-side table sorting</h3>
|
||||
<a href="index.html">Back to documentation</a>
|
||||
</div>
|
||||
@ -153,182 +22,16 @@
|
||||
<div id="main">
|
||||
|
||||
<p class="tip">
|
||||
<span class="label label-info">NOTE!</span>
|
||||
<span class="label warning">NOTE!</span>
|
||||
</p>
|
||||
<h3>In <span class="version updated">v2.28.4</span>, Bootstrap demo files were renamed</h3>
|
||||
<h4>Choose the demo by version number below:</h4>
|
||||
<ul>
|
||||
<li>In <span class="version updated">v2.28.4</span>, added support for the column widget.</li>
|
||||
<li>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
|
||||
<ul>
|
||||
<li>Note the changes to the sorting icons in the <code>$.tablesorter.themes.bootstrap</code> defaults below.</li>
|
||||
<li>Just use the appropriate icon class name (<code>icon-{name}</code> for Bootstrap v2, and <code>glyphicon glyphicon-{name}</code> for Bootstrap v3.</li>
|
||||
<li>And of course include the necessary Bootstrap image or font).</li>
|
||||
<li>Wrapped all of the <code>pager</code> controls in the tfoot within a div (don't use the class name <code>pager</code> as it adds a lot of padding) to keep the controls from being centered.</li>
|
||||
<li>Pager control buttons in the tfoot have class names needed for both Bootstrap v2+ and v3, so there's no need for you to use both, just use the ones you need.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>As of tablesorter version 2.9+, this widget can no longer be applied to versions of tablesorter prior to version 2.8.</li>
|
||||
<li>Make sure to include the <code>{icon}</code> in the <code>headerTemplate</code> to add a sorting arrow to the headers.</li>
|
||||
<li>Added in v2.7!
|
||||
<ul>
|
||||
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code.</li>
|
||||
<li>Setting <code>theme</code> option to <code>"Bootstrap"</code> will now override/ignore the <code>uitheme</code> value in the <code>widgetOptions</code>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the Bootstrap theme saved to <code>$.tablesorter.themes.bootstrap</code>.</li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <del><code>uitheme</code> widget</del> <code>theme</code> option (changed in v2.7) to <code>"bootstrap"</code> to set the widget to use the Bootstrap theme. See the <a href="example-widget-ui-theme.html">jQuery UI demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo shows how to get around an issue with the filter widget:
|
||||
<ul>
|
||||
<li>The <span class="label label-info">zebra widget button</span> below was added to show that when bootstrap's "table-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 <code>nth-child()</code> selector.</li>
|
||||
<li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="button" class="filter btn btn-sm btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
|
||||
<li>Try other filter searches with the zebra widget disabled, like <button type="button" class="filter btn btn-sm btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter glyphicon glyphicon-filter"></i> Filter "male"</button> in the "Sex" column.</li>
|
||||
<li>To solve this issue, just enable the zebra widget and the "even" and "odd" row class names <del>will</del> should over-ride the <code>nth-child()</code> styling.<br><span class="label label-warning">NOTE!</span> This doesn't seem to work in the latest Bootstrap version, so you'll have to remove the "table-striped" class completely from the table.</li>
|
||||
<li>The only down side is that for custom bootstrap themes, you'll need to edit the "theme.bootstrap.css" file for bootstrap.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>This demo uses HTML5 data attributes and therefore needs jQuery 1.4+.</li>
|
||||
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a></li>
|
||||
<li><a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a></li>
|
||||
<li><a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a></li>
|
||||
</ul>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="bootstrap_buttons">
|
||||
Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh glyphicon glyphicon-refresh"></i> Reset filters</button>
|
||||
<br>
|
||||
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok glyphicon glyphicon-ok"></i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table> <!-- bootstrap classes added by the uitheme widget -->
|
||||
<thead>
|
||||
<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>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>
|
||||
<th colspan="7" class="ts-pager form-inline">
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-default first"><span class="glyphicon glyphicon-step-backward"></span></button>
|
||||
<button type="button" class="btn btn-default prev"><span class="glyphicon glyphicon-backward"></span></button>
|
||||
</div>
|
||||
<span class="pagedisplay"></span>
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<button type="button" class="btn btn-default next"><span class="glyphicon glyphicon-forward"></span></button>
|
||||
<button type="button" class="btn btn-default last"><span class="glyphicon glyphicon-step-forward"></span></button>
|
||||
</div>
|
||||
<select class="form-control input-sm 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 input-sm pagenum" title="Select page number"></select>
|
||||
</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
<tr><td>Student01</td><td>Languages</td><td>male</td><td>80</td><td>70</td><td>75</td><td>80</td></tr>
|
||||
<tr><td>Student02</td><td>Mathematics</td><td>male</td><td>90</td><td>88</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student03</td><td>Languages</td><td>female</td><td>85</td><td>95</td><td>80</td><td>85</td></tr>
|
||||
<tr><td>Student04</td><td>Languages</td><td>male</td><td>60</td><td>55</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student05</td><td>Languages</td><td>female</td><td>68</td><td>80</td><td>95</td><td>80</td></tr>
|
||||
<tr><td>Student06</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student07</td><td>Mathematics</td><td>male</td><td>85</td><td>68</td><td>90</td><td>90</td></tr>
|
||||
<tr><td>Student08</td><td>Languages</td><td>male</td><td>100</td><td>90</td><td>90</td><td>85</td></tr>
|
||||
<tr><td>Student09</td><td>Mathematics</td><td>male</td><td>80</td><td>50</td><td>65</td><td>75</td></tr>
|
||||
<tr><td>Student10</td><td>Languages</td><td>male</td><td>85</td><td>100</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student11</td><td>Languages</td><td>male</td><td>86</td><td>85</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student12</td><td>Mathematics</td><td>female</td><td>100</td><td>75</td><td>70</td><td>85</td></tr>
|
||||
<tr><td>Student13</td><td>Languages</td><td>female</td><td>100</td><td>80</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student14</td><td>Languages</td><td>female</td><td>50</td><td>45</td><td>55</td><td>90</td></tr>
|
||||
<tr><td>Student15</td><td>Languages</td><td>male</td><td>95</td><td>35</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student16</td><td>Languages</td><td>female</td><td>100</td><td>50</td><td>30</td><td>70</td></tr>
|
||||
<tr><td>Student17</td><td>Languages</td><td>female</td><td>80</td><td>100</td><td>55</td><td>65</td></tr>
|
||||
<tr><td>Student18</td><td>Mathematics</td><td>male</td><td>30</td><td>49</td><td>55</td><td>75</td></tr>
|
||||
<tr><td>Student19</td><td>Languages</td><td>male</td><td>68</td><td>90</td><td>88</td><td>70</td></tr>
|
||||
<tr><td>Student20</td><td>Mathematics</td><td>male</td><td>40</td><td>45</td><td>40</td><td>80</td></tr>
|
||||
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
|
||||
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
|
||||
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
|
||||
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
|
||||
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
|
||||
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
|
||||
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td></tr>
|
||||
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td></tr>
|
||||
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td></tr>
|
||||
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td></tr>
|
||||
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td></tr>
|
||||
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td></tr>
|
||||
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td></tr>
|
||||
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td></tr>
|
||||
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td></tr>
|
||||
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td></tr>
|
||||
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td></tr>
|
||||
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td></tr>
|
||||
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td></tr>
|
||||
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td></tr>
|
||||
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td></tr>
|
||||
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td></tr>
|
||||
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td></tr>
|
||||
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td></tr>
|
||||
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td></tr>
|
||||
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td></tr>
|
||||
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td></tr>
|
||||
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td></tr>
|
||||
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td></tr>
|
||||
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td></tr>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
<h2>Page Header</h2>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- Bootstrap stylesheet -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<!-- bootstrap widget theme -->
|
||||
<link rel="stylesheet" href="css/theme.bootstrap.css">
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<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></pre>
|
||||
</div>
|
||||
|
||||
<h2>Javascript</h2>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h2>HTML</h2>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x demo ››</a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="stylesheet" href="css/prettify.css">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Google charts -->
|
||||
@ -485,7 +485,7 @@ FusionCharts.ready(function () {
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
|
||||
<!-- buttons -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script><!-- -->
|
||||
<link href="css/jq.css" rel="stylesheet">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/tipsy.css" rel="stylesheet">
|
||||
|
||||
@ -10,7 +10,7 @@
|
||||
<!-- Demo stuff -->
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
<script src="js/jquery-ui.min.js"></script>
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link href="css/prettify.css" rel="stylesheet">
|
||||
|
||||
@ -124,7 +124,7 @@ $table.trigger('applyWidgets');</pre>
|
||||
<ul>
|
||||
<li>All theme class names are now contained within <code>$.tablesorter.themes</code> with the jQuery UI theme saved to <code>$.tablesorter.themes.jui</code></li>
|
||||
<li>The themes variable allows you to modify the class names for the table, header, sort icons, active state, hover state, filter inputs and zebra striping. See the code below on how to extend these variables.</li>
|
||||
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-widget-bootstrap-theme.html">bootstrap demo</a> for another example.</li>
|
||||
<li>Set the <code>uitheme</code> widget option to <code>"jui"</code> to set the widget to use the jQuery UI theme. See the <a href="example-option-theme-bootstrap-v3.html">bootstrap demo</a> for another example.</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Earlier widget versions required jQuery 1.4+. The UITheme widget for tablesorter 2.4+ requires jQuery 1.2.6+.</li>
|
||||
@ -202,7 +202,6 @@ $table.trigger('applyWidgets');</pre>
|
||||
</tbody>
|
||||
</table></div>
|
||||
|
||||
|
||||
<h1>Page Header</h1>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- ui theme stylesheet - contents shown below -->
|
||||
@ -210,6 +209,9 @@ $table.trigger('applyWidgets');</pre>
|
||||
<!-- jQuery UI theme (cupertino example here) -->
|
||||
<link rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
|
||||
<!-- load jQuery first -->
|
||||
<script src="js/jquery.min.js"></script>
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
@ -228,7 +230,7 @@ $table.trigger('applyWidgets');</pre>
|
||||
|
||||
<div class="next-up">
|
||||
<hr />
|
||||
Next up: <a href="example-widget-bootstrap-theme.html">UITheme widget - Bootstrap theme ››</a><br>
|
||||
Next up: <a href="example-option-theme-bootstrap-v3.html">UITheme widget - Bootstrap theme ››</a><br>
|
||||
Second time around: <a href="example-option-render-header.html">Modifying the Header during rendering ››</a>
|
||||
</div>
|
||||
|
||||
|
||||
@ -15,7 +15,7 @@
|
||||
<link rel="stylesheet" href="css/prettify.css">
|
||||
<script src="js/prettify.js"></script>
|
||||
<script src="js/docs.js"></script>
|
||||
<!--<link rel="stylesheet" href="css/bootstrap.min.css">-->
|
||||
<!--<link rel="stylesheet" href="css/bootstrap-v3.min.css">-->
|
||||
<!--<script src="js/bootstrap.min.js"></script>-->
|
||||
|
||||
<!-- Tablesorter: required -->
|
||||
|
||||
@ -5,7 +5,7 @@
|
||||
<title>jQuery tablesorter 2.0</title>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/bootstrap.min.css">
|
||||
<link rel="stylesheet" href="css/bootstrap-v3.min.css">
|
||||
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
|
||||
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
@ -353,10 +353,12 @@
|
||||
|
||||
<h4>Theming</h4>
|
||||
<ul>
|
||||
<li>The <a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x</a>, <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> & <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
|
||||
<li>The <a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a>, <a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> & <a href="example-widget-ui-theme.html">jQuery UI</a> themes require the uitheme widget.</li>
|
||||
<li>The <a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> theme (<span class="version">v2.28.4</span>) does not require the uitheme widget!</li>
|
||||
<li>Set up a <a href="example-option-theme-metro-style.html">Metro style theme</a> (<span class="version">v2.16.4</span>).</li>
|
||||
<li>Set up a <a href="example-option-theme-materialize.html">Materialize theme</a> (<span class="version">v2.27.0</span>).</li>
|
||||
<li>Use css to <a href="example-css-highlighting.html">highlight rows & columns</a> (<span class="version">v2.20.0</span>).</li>
|
||||
<li>See all <a href="themes.html">available themes</a>.</li>
|
||||
</ul>
|
||||
<p></p>
|
||||
|
||||
@ -517,8 +519,9 @@
|
||||
<li><span class="results">†</span> UITheme widget (<span class="version">v2.0.9</span>; <span class="version updated">v2.27.0</span>):
|
||||
<ul>
|
||||
<li><a href="example-widget-ui-theme.html">jQuery UI theme</a> (v2.0.9; <span class="version updated">v2.27.0</span>).</li>
|
||||
<li><a href="example-widget-bootstrap-theme-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>).</li>
|
||||
<li><a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> (v2.4.0; <span class="version updated">v2.28.4</span>).</li>
|
||||
<li><a href="example-option-theme-bootstrap-v2.html">Bootstrap v2.x</a> (demo added <span class="version">v2.22.0</span>).</li>
|
||||
<li><a href="example-option-theme-bootstrap-v3.html">Bootstrap v3.x</a> (v2.4.0; <span class="version updated">v2.28.4</span>).</li>
|
||||
<li><a href="example-option-theme-bootstrap-v4.html">Bootstrap v4.x</a> (<span class="version updated">v2.28.4</span>) <span class="label warning">NOTE</span> <strong>does not</strong> require the uitheme widget!</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span class="label label-info">Beta</span> <a href="example-widget-view.html">View Widget</a> (<span class="version">v2.24.0</span>; <span class="version updated">v2.26.6</span>).</li>
|
||||
@ -4569,7 +4572,7 @@ $('table').trigger('search', false);</pre></div>
|
||||
<a href="example-pager.html">1</a>
|
||||
<a href="example-pager-ajax.html">2</a>
|
||||
<a href="example-pager-filtered.html">3</a>
|
||||
<a href="example-widget-bootstrap-theme.html">4</a>
|
||||
<a href="example-option-theme-bootstrap-v3.html">4</a>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
<link href="../css/theme.jui.css" rel="stylesheet">
|
||||
|
||||
<!-- bootstrap -->
|
||||
<link href="css/bootstrap.min.css" rel="stylesheet">
|
||||
<link href="css/bootstrap-v3.min.css" rel="stylesheet">
|
||||
<link href="../css/theme.bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- more themes -->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user