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 v2.x)< / title >
2015-05-16 20:30:59 +00:00
<!-- jQuery -->
< script src = "js/jquery-1.4.4.min.js" > < / script >
<!-- Demo stuff -->
< link rel = "stylesheet" href = "css/jq.css" >
< link rel = "stylesheet" href = "css/bootstrap-v2.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_2.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" > $ ( f u n c t i o n ( ) {
// NOTE: $.tablesorter.theme.bootstrap is ALREADY INCLUDED in the jquery.tablesorter.widgets.js
2017-01-07 01:46:57 +00:00
// file for Bootstrap v3.x; it is included here because of class name differences in Bootstrap v2
2015-05-16 20:30:59 +00:00
// 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,
// 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 : 'icon-chevron-up', // class name added to icon when column has ascending sort
iconSortDesc : 'icon-chevron-down', // class name added to icon when column has descending sort
filterRow : '', // filter row class
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
2017-01-07 01:46:57 +00:00
theme : "bootstrap", // version 2!!
2015-05-16 20:30:59 +00:00
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)
2016-12-31 00:08:32 +00:00
widgets : [ "uitheme", "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",
// hide the filter row when not active
filter_hideFilters : true
}
})
.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')
2016-12-31 00:08:32 +00:00
.toggleClass('icon-ok icon-remove').end()
2015-05-16 20:30:59 +00:00
.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 > Bootstrap v2.x Theme (requires UITheme Widget)< / 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" >
< p class = "tip" >
< span class = "label label-info" > NOTE!< / span >
2016-01-10 22:24:57 +00:00
< / p >
< ul >
2017-01-07 01:46:57 +00:00
< 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 >
2016-12-31 00:08:32 +00:00
< li > In < span class = "version updated" > v2.28.4< / span > , added support for the column widget.< / li >
2016-01-10 22:24:57 +00:00
< 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 >
2017-01-07 01:46:57 +00:00
< 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 >
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" >
2016-12-31 00:08:32 +00:00
Reset filter : < button type = "button" class = "reset btn btn-primary" data-column = "0" data-filter = "" > < i class = "icon-white icon-refresh" > < / i > Reset filters< / button >
2015-05-16 20:30:59 +00:00
< br >
2016-12-31 00:08:32 +00:00
Zebra widget : < button type = "button" class = "zebra btn btn-success" > < i class = "icon-white icon-ok" > < / i > < span > enabled< / span > < / button >
2015-05-16 20:30:59 +00:00
< / 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-horizontal" >
2016-12-31 00:08:32 +00:00
< div class = "btn-group" >
< button type = "button" class = "btn first" > < i class = "icon-step-backward" > < / i > < / button >
< button type = "button" class = "btn prev" > < i class = "icon-arrow-left" > < / i > < / button >
< / div >
2015-05-16 20:30:59 +00:00
< span class = "pagedisplay" > < / span > <!-- this can be any element, including an input -->
2016-12-31 00:08:32 +00:00
< div class = "btn-group" >
< button type = "button" class = "btn next" > < i class = "icon-arrow-right" > < / i > < / button >
< button type = "button" class = "btn last" > < i class = "icon-step-forward" > < / i > < / button >
< / div >
2015-05-16 20:30:59 +00:00
< select class = "pagesize input-mini" title = "Select page size" >
< option selected = "selected" value = "10" > 10< / option >
< option value = "20" > 20< / option >
< option value = "30" > 30< / option >
2016-12-31 00:08:32 +00:00
< option value = "all" > All Rows< / option >
2015-05-16 20:30:59 +00:00
< / select >
< select class = "pagenum input-mini" 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 -->
2017-12-12 19:19:20 +00:00
< link rel=" stylesheet" href=" css/bootstrap-v2.min.css" >
2015-05-16 20:30:59 +00:00
< !-- bootstrap widget theme -->
2015-05-17 18:53:30 +00:00
< link rel=" stylesheet" href=" css/theme.bootstrap_2.css" >
2015-05-16 20:30:59 +00:00
2017-01-07 01:46:57 +00:00
< !-- load jQuery first -->
< script src=" js/jquery.min.js" > < /script>
2015-05-16 20:30:59 +00:00
< !-- tablesorter plugin -->
< script src=" js/jquery.tablesorter.js" > < /script>
< !-- tablesorter widget file - loaded after the plugin -->
< script src=" js/jquery.tablesorter.widgets.js" > < /script>
< !-- pager plugin -->
< link rel=" stylesheet" href=" css/jquery.tablesorter.pager.css" >
< script src=" js/jquery.tablesorter.pager.js" > < /script> < / 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-resizable.html" > Resizable Columns widget › › < / a >
< / div >
< / div >
< / body >
< / html >
