2015-05-16 20:30:59 +00:00
<!DOCTYPE html>
< html >
< head >
< meta charset = "utf-8" >
2017-01-07 01:46:57 +00:00
< title > jQuery tablesorter 2.0 - Bootstrap Theme (Bootstrap v4.x)< / title >
2015-05-16 20:30:59 +00:00
<!-- jQuery -->
2017-01-07 01:46:57 +00:00
< script src = "js/jquery-latest.min.js" > < / script >
2015-05-16 20:30:59 +00:00
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
2017-01-07 01:46:57 +00:00
< link rel = "stylesheet" href = "css/bootstrap-v4.min.css" >
2015-05-16 20:30:59 +00:00
< link href = "css/prettify.css" rel = "stylesheet" >
< script src = "js/prettify.js" > < / script >
< script src = "js/docs.js" > < / script >
<!-- Tablesorter: required for bootstrap -->
2017-01-07 01:46:57 +00:00
< link rel = "stylesheet" href = "../css/theme.bootstrap_4.css" >
2015-05-16 20:30:59 +00:00
< 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" >
2017-01-07 01:46:57 +00:00
< style >
.tablesorter-pager .btn-group-sm .btn {
font-size: 1.2em;
}
< / style >
2015-05-16 20:30:59 +00:00
< script src = "../addons/pager/jquery.tablesorter.pager.js" > < / script >
< script id = "js" > $ ( f u n c t i o n ( ) {
$("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)
2017-01-07 01:46:57 +00:00
// the uitheme widget is NOT REQUIRED!
widgets : [ "filter", "columns", "zebra" ],
2015-05-16 20:30:59 +00:00
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"],
2016-12-31 00:08:32 +00:00
// class names added to columns when sorted
columns: [ "primary", "secondary", "tertiary" ],
2015-05-16 20:30:59 +00:00
// reset filters button
filter_reset : ".reset",
2017-01-07 01:46:57 +00:00
// 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'
]
2015-05-16 20:30:59 +00:00
}
})
.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]
2017-01-07 01:46:57 +00:00
.config.widgets = (t) ? ["filter"] : ["filter", "zebra"];
2015-05-16 20:30:59 +00:00
$(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 >
2017-01-07 01:46:57 +00:00
< h2 > jQuery Theme (Bootstrap v4.x)< / h2 >
2015-05-16 20:30:59 +00:00
< h3 > Flexible client-side table sorting< / h3 >
< a href = "index.html" > Back to documentation< / a >
< / div >
< div id = "main" >
2017-01-07 01:46:57 +00:00
< div class = "alert alert-warning" role = "alert" >
2017-09-01 03:03:30 +00:00
< strong > NOTE!< / strong > : Bootstrap v4.x is still in beta development. We do not recommend using it, or the < code > theme.bootstrap_4.css< / code > theme file < em > in production< / em > until a stable release is available.
2017-01-07 01:46:57 +00:00
< / div >
2016-01-10 22:24:57 +00:00
< ul >
2017-09-01 03:03:30 +00:00
< 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.< / li >
< li > Get the current version of < a href = "https://getbootstrap.com/" > Bootstrap< / a > (now v4.x).< br > < br > < / li >
2017-12-16 16:03:06 +00:00
< li > In < span class = "version updated" > v2.29.3< / span >
< ul >
< li > Updated to use Bootstrap v4.0.0-beta.2.< / li >
< li > Updated theme v4 by changing < code > table-inverse< / code > to < code > table-dark< / code > .< / li >
< li > Updated theme v4 by changing < code > thead-inverse< / code > to < code > thead-dark< / code > .< / li >
< / ul >
< / li >
2017-09-01 03:03:30 +00:00
< li > In < span class = "version updated" > v2.29.0< / span > , updated to use Bootstrap v4.0.0-beta.< / li >
< li > In < span class = "version" > v2.28.4< / span > , added this Bootstrap v4.0.0-alpha.6 demo.< / li >
< li > Notes:
< ul >
< li > This version of the theme < strong > no longer requires the UITheme widget< / strong > !< / li >
< li > Bootstrap v4.x no longer includes fonts or images, so I didn't bother including Font Awesome icons on this demo page.< / 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 >
< / li >
2016-01-10 22:24:57 +00:00
< / ul >
2015-05-16 20:30:59 +00:00
< 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" >
2017-01-07 01:46:57 +00:00
Reset filter : < button type = "button" class = "reset btn btn-primary" data-column = "0" data-filter = "" > Reset filters< / button >
2015-05-16 20:30:59 +00:00
< br >
2017-01-07 01:46:57 +00:00
Zebra widget : < button type = "button" class = "zebra btn btn-success" > < span > enabled< / span > < / button >
2015-05-16 20:30:59 +00:00
< / div >
< br >
2017-01-07 01:46:57 +00:00
< div id = "demo" > < table class = "table table-bordered table-striped" >
2017-12-16 16:03:06 +00:00
< thead class = "thead-dark" > <!-- add class="thead - light" for a light header -->
2015-05-16 20:30:59 +00:00
< 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 >
2017-01-07 01:46:57 +00:00
< th class = "sorter-false filter-false" > Geometry< / th > < / tr >
2015-05-16 20:30:59 +00:00
< / 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 >
2017-01-07 01:46:57 +00:00
< 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 >
2016-12-31 00:08:32 +00:00
< / div >
2015-05-16 20:30:59 +00:00
< / 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 >
2017-01-07 01:46:57 +00:00
< pre class = "prettyprint lang-html" > < !-- Bootstrap v4.x stylesheet -->
2015-05-16 20:30:59 +00:00
< link rel=" stylesheet" href=" css/bootstrap.min.css" >
2017-01-07 01:46:57 +00:00
< !-- bootstrap css theme -->
< link rel=" stylesheet" href=" css/theme.bootstrap_4.css" >
2015-05-16 20:30:59 +00:00
2017-01-07 01:46:57 +00:00
< script src=" js/jquery.min.js" > < /script>
2015-05-16 20:30:59 +00:00
< 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" >
2017-01-07 01:46:57 +00:00
< 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 >
2015-05-16 20:30:59 +00:00
< / 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 / >
2017-01-07 01:46:57 +00:00
Next up: < a href = "example-widget-bootstrap-theme-v3.html" > Bootstrap v3.x demo › › < / a >
2015-05-16 20:30:59 +00:00
< / div >
< / div >
< / body >
< / html >
