mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Theme: Add Materialize theme style. Fixes #1242
This commit is contained in:
Rob Garrison
parent
96731e2d26
commit
40a1faed5f
176
css/theme.materialize.css
Normal file
176
css/theme.materialize.css
Normal file
@ -0,0 +1,176 @@
|
||||
/*************
|
||||
Materialize theme (http://materializecss.com/)
|
||||
*************/
|
||||
/* jQuery materialize Theme */
|
||||
.tablesorter-materialize {
|
||||
width: 100%;
|
||||
}
|
||||
.tablesorter-materialize thead th,
|
||||
.tablesorter-materialize thead td,
|
||||
.tablesorter-materialize tfoot th,
|
||||
.tablesorter-materialize tfoot td {
|
||||
font: 14px/20px Arial, Sans-serif;
|
||||
font-weight: bold;
|
||||
padding: 4px;
|
||||
margin: 0 0 18px;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.tablesorter-materialize .tablesorter-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
.tablesorter-materialize .sorter-false {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tablesorter-materialize .tablesorter-header-inner {
|
||||
position: relative;
|
||||
padding: 4px 18px 4px 4px;
|
||||
}
|
||||
|
||||
/* sort icons */
|
||||
.tablesorter-materialize thead .tablesorter-header {
|
||||
background-repeat: no-repeat;
|
||||
background-position: center right;
|
||||
padding: 4px 18px 4px 4px;
|
||||
white-space: normal;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* black unsorted icon */
|
||||
.tablesorter-materialize thead .tablesorter-headerUnSorted {
|
||||
/* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 8 1 8 8 0zM15 9 1 9 8 16z" fill="#222"/></svg> */
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iIzIyMiIvPjwvc3ZnPg==);
|
||||
}
|
||||
/* black asc icon */
|
||||
.tablesorter-materialize thead .tablesorter-headerAsc {
|
||||
/* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 11 1 11 8 3z" fill="#222"/></svg> */
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjMjIyIi8+PC9zdmc+);
|
||||
}
|
||||
/* black desc icon */
|
||||
.tablesorter-materialize thead .tablesorter-headerDesc {
|
||||
/* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 6 1 6 8 13z" fill="#222"/></svg> */
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgNiAxIDYgOCAxM3oiIGZpbGw9IiMyMjIiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
/* white unsorted icon */
|
||||
.tablesorter-materialize-dark thead .tablesorter-headerUnSorted {
|
||||
/* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 8 1 8 8 0zM15 9 1 9 8 16z" fill="#fff"/></svg> */
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgOCAxIDggOCAwek0xNSA5IDEgOSA4IDE2eiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==);
|
||||
}
|
||||
/* white asc icon */
|
||||
.tablesorter-materialize-dark thead .tablesorter-headerAsc {
|
||||
/* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 11 1 11 8 3z" fill="#fff"/></svg> */
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgMTEgMSAxMSA4IDN6IiBmaWxsPSIjZmZmIi8+PC9zdmc+);
|
||||
}
|
||||
/* white desc icon */
|
||||
.tablesorter-materialize-dark thead .tablesorter-headerDesc {
|
||||
/* <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 24 16"><path d="M15 6 1 6 8 13z" fill="#fff"/></svg> */
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDI0IDE2Ij48cGF0aCBkPSJNMTUgNiAxIDYgOCAxM3oiIGZpbGw9IiNmZmYiLz48L3N2Zz4=);
|
||||
}
|
||||
|
||||
/* since materialize (table-striped) uses nth-child(), we just use this to add a zebra stripe color */
|
||||
.tablesorter-materialize > tbody > tr.odd > td,
|
||||
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ tr.tablesorter-hasChildRow.odd ~ .tablesorter-childRow.odd > td {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
.tablesorter-materialize > tbody > tr.hover > td,
|
||||
.tablesorter-materialize > tbody > tr.odd:hover > td,
|
||||
.tablesorter-materialize > tbody > tr.even:hover > td,
|
||||
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.odd:hover ~ .tablesorter-childRow.odd > td,
|
||||
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ .tablesorter-childRow.even > td {
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
.tablesorter-materialize > tbody > tr.even > td,
|
||||
.tablesorter-materialize > tbody > tr.tablesorter-hasChildRow.even:hover ~ tr.tablesorter-hasChildRow.even ~ .tablesorter-childRow.even > td {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* processing icon */
|
||||
.tablesorter-materialize .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;
|
||||
}
|
||||
|
||||
/* caption */
|
||||
.caption {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* filter widget */
|
||||
.tablesorter-materialize .tablesorter-filter-row input.tablesorter-filter,
|
||||
.tablesorter-materialize .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-materialize .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-materialize .tablesorter-filter-row {
|
||||
background-color: #efefef;
|
||||
}
|
||||
.tablesorter-materialize .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-materialize .tablesorter-filter-row.hideme td {
|
||||
padding: 2px; /* change this to modify the thickness of the closed border row */
|
||||
margin: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.tablesorter-materialize .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 (needed for child rows) */
|
||||
.tablesorter .filtered {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* pager plugin */
|
||||
.tablesorter-materialize .tablesorter-pager select {
|
||||
padding: 4px 6px;
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
}
|
||||
.tablesorter-materialize .tablesorter-pager .pagedisplay {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ajax error row */
|
||||
.tablesorter .tablesorter-errorRow td {
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
background-color: #e6bf99;
|
||||
}
|
||||
282
docs/example-option-theme-materialize.html
Normal file
282
docs/example-option-theme-materialize.html
Normal file
@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>jQuery tablesorter 2.0 - Theme Materialize</title>
|
||||
|
||||
<!-- jQuery -->
|
||||
<script src="js/jquery-latest.min.js"></script>
|
||||
|
||||
<!-- Demo stuff -->
|
||||
<link rel="stylesheet" href="css/jq.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.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.materialize.css">
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/widgets/widget-filter.js"></script>
|
||||
|
||||
<!-- Tablesorter: optional -->
|
||||
<link rel="stylesheet" href="../addons/pager/jquery.tablesorter.pager.css">
|
||||
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
||||
<style id="css">/* UL padding override - see https://github.com/Dogfalo/materialize/issues/2786#issuecomment-234809753 */
|
||||
ul { padding-left: 20px; }
|
||||
.btn { font-size: .8em; }
|
||||
/* not sure why this is needed... */
|
||||
.material-icons { vertical-align: bottom; }</style>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
$("table").tablesorter({
|
||||
theme : "materialize",
|
||||
|
||||
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)
|
||||
widgets : [ "filter", "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 materialize theming if you are using the filter widget, because rows are hidden
|
||||
zebra : ["even", "odd"],
|
||||
|
||||
// reset filters button
|
||||
filter_reset : ".reset",
|
||||
|
||||
// extra css class name (string or array) added to the filter element (input or select)
|
||||
// select needs a "browser-default" class or it gets hidden
|
||||
filter_cssFilter: ["", "", "browser-default"]
|
||||
}
|
||||
})
|
||||
.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('green');
|
||||
$('table')
|
||||
.toggleClass('striped')[0]
|
||||
.config.widgets = (t) ? ["filter"] : ["filter", "zebra"];
|
||||
$(this)
|
||||
.toggleClass('red green')
|
||||
.find('i')
|
||||
.text(t ? 'clear' : 'done').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 Theme - Materialize</h2>
|
||||
<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>
|
||||
</p>
|
||||
<ul class="browser-default">
|
||||
<li>Added Materialize theme style (<span class="version">v2.27.0</span> for <a href="http://materializecss.com/">materialize</a> v0.97.7).</li>
|
||||
<li>Important Notes:
|
||||
<ul>
|
||||
<li>Any filter select is automatically hidden. It looks like javascript is needed to restyle the select, which this demo isn't using, so I had to include a <code>"browser-default"</code> class in the <code>filter_cssFilter</code> option to prevent it from being hidden.</li>
|
||||
<li>The pager buttons are huge... I didn't see an option for small buttons, just button and large button.</li>
|
||||
<li>Adding a <code>"input-field"</code> class to the filter row (it does wrap the inputs/select LOL), actually seems to break the desired action. The input turns white and the underline disappears. I guess I could just make the entire filter row white... I do miss the "x" inside the search input though.</li>
|
||||
</ul>
|
||||
<br>
|
||||
</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 materialize's "striped" class is applied, the css defined zebra striping will not apply correctly because table rows are hidden but still accounted for by the css <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" data-column="5" data-filter=">80"><i class="material-icons">search</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" data-column="2" data-filter="male"><i class="material-icons">search</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.</li>
|
||||
<li>The only down side is that for custom materialize themes, you'll need to edit the "theme.materialize.css" file.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h4>Demo</h4>
|
||||
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
|
||||
<div class="materialize_buttons">
|
||||
Reset filter : <button type="button" class="reset btn" data-column="0" data-filter=""><i class="material-icons">loop</i> Reset filters</button>
|
||||
<p></p>
|
||||
Zebra widget : <button type="button" class="zebra btn green"><i class="material-icons">done</i> <span>enabled</span></button>
|
||||
</div>
|
||||
<br>
|
||||
|
||||
<div id="demo"><table> <!-- add materialize classes, as desired -->
|
||||
<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>
|
||||
<!-- include "tablesorter-ignoreRow" class for pager rows in thead -->
|
||||
<tr class="tablesorter-ignoreRow">
|
||||
<th colspan="7" class="ts-pager form-horizontal">
|
||||
<button type="button" class="btn first"><i class="small material-icons">first_page</i></button>
|
||||
<button type="button" class="btn prev"><i class="small material-icons">navigate_before</i></button>
|
||||
<span class="pagedisplay"></span>
|
||||
<!-- this can be any element, including an input -->
|
||||
<button type="button" class="btn next"><i class="small material-icons">navigate_next</i></button>
|
||||
<button type="button" class="btn last"><i class="small material-icons">last_page</i></button>
|
||||
<select class="pagesize browser-default" title="Select page size">
|
||||
<option selected="selected" value="10">10</option>
|
||||
<option value="20">20</option>
|
||||
<option value="30">30</option>
|
||||
<option value="40">40</option>
|
||||
</select>
|
||||
<select class="pagenum browser-default" 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>
|
||||
|
||||
<h5>Page Header</h5>
|
||||
<div>
|
||||
<pre class="prettyprint lang-html"><!-- materialize stylesheet & icon font -->
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.6/css/materialize.min.css">
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
|
||||
<!-- materialize theme -->
|
||||
<link rel="stylesheet" href="css/theme.materialize.css">
|
||||
|
||||
<!-- tablesorter plugin -->
|
||||
<script src="js/jquery.tablesorter.js"></script>
|
||||
<!-- tablesorter widget file - loaded after the plugin -->
|
||||
<script src="js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<!-- pager plugin -->
|
||||
<link rel="stylesheet" href="css/jquery.tablesorter.pager.css">
|
||||
<script src="js/jquery.tablesorter.pager.js"></script></pre>
|
||||
</div>
|
||||
|
||||
<h5>Javascript</h5>
|
||||
<div id="javascript">
|
||||
<pre class="prettyprint lang-javascript"></pre>
|
||||
</div>
|
||||
|
||||
<h5>CSS</h5>
|
||||
<div id="css">
|
||||
<pre class="prettyprint lang-css"></pre>
|
||||
</div>
|
||||
|
||||
<h5>HTML</h5>
|
||||
<div id="html">
|
||||
<pre class="prettyprint lang-html"></pre>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -354,6 +354,7 @@
|
||||
<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>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>
|
||||
</ul>
|
||||
<p></p>
|
||||
@ -509,7 +510,7 @@
|
||||
|
||||
<li><span class="label label-info">Beta</span> <a href="example-widget-toggle-tablesorter.html">Toggle Sort & Filter Widget</a> (<span class="version">v2.24.4</span>).</li>
|
||||
|
||||
<li><span class="results">†</span> UITheme widget (<span class="version">v2.0.9</span>):
|
||||
<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>) & <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> (v2.4).</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user