library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2025-01-12 15:24:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Themes: Add column widget support to bootstrap. See #1347

Browse Source
This commit is contained in:
Rob Garrison 2016-12-30 18:08:32 -06:00
parent 1b43b04015
commit e95a77efe7
5 changed files with 88 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
css/theme.bootstrap.css
View File

@ -83,6 +83,29 @@
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;
@ -143,7 +166,7 @@
opacity: 0;
filter: alpha(opacity=0);
}
/* rows hidden by filtering (needed for child rows) */
/* rows hidden by filtering */
.tablesorter .filtered {
display: none;
}

25
css/theme.bootstrap_2.css
View File

@ -89,6 +89,29 @@
z-index: 1000;
}
/* 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;
@ -145,7 +168,7 @@ caption {
opacity: 0;
filter: alpha(opacity=0);
}
/* rows hidden by filtering (needed for child rows) */
/* rows hidden by filtering */
.tablesorter .filtered {
display: none;
}

26
docs/example-widget-bootstrap-theme-v2.html
View File

@ -64,13 +64,16 @@
// 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", "zebra" ],
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",
@ -125,7 +128,7 @@
$(this)
.toggleClass('btn-danger btn-success')
.find('i')
.toggleClass('icon-ok icon-remove glyphicon-ok glyphicon-remove').end()
.toggleClass('icon-ok icon-remove').end()
.find('span')
.text(t ? 'disabled' : 'enabled');
$('table').trigger('refreshWidgets', [false]);
@ -150,6 +153,7 @@
<span class="label label-info">NOTE!</span>
</p>
<ul>
<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 &amp; 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>
@ -158,9 +162,9 @@
<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>
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>
<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>
Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok"></i> <span>enabled</span></button>
</div>
<br>
@ -187,16 +191,20 @@
</tr>
<tr>
<th colspan="7" class="ts-pager form-horizontal">
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
<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>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
<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>
<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>
<option value="40">40</option>
<option value="all">All Rows</option>
</select>
<select class="pagenum input-mini" title="Select page number"></select>
</th>

35
docs/example-widget-bootstrap-theme.html
View File

@ -63,13 +63,16 @@
// 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", "zebra" ],
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",
@ -153,7 +156,8 @@
<span class="label label-info">NOTE!</span>
</p>
<ul>
<li><span class="label label-success">New!</span>In tablesorter v2.11+, The bootstrap theme now works with Bootstrap 3 and older versions.
<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>
@ -180,8 +184,8 @@
<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-small 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-small 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 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>
@ -220,19 +224,23 @@
<th>Geometry</th>
</tr>
<tr>
<th colspan="7" class="ts-pager form-horizontal">
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
<select class="pagesize input-mini" title="Select page size">
<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="40">40</option>
<option value="all">All Rows</option>
</select>
<select class="pagenum input-mini" title="Select page number"></select>
<select class="form-control input-sm pagenum" title="Select page number"></select>
</th>
</tr>
</tfoot>
@ -299,7 +307,6 @@
&lt;!-- tablesorter plugin --&gt;
&lt;script src=&quot;js/jquery.tablesorter.js&quot;&gt;&lt;/script&gt;
&lt;!-- tablesorter widget file - loaded after the plugin --&gt;
&lt;script src=&quot;js/jquery.tablesorter.widgets.js&quot;&gt;&lt;/script&gt;
&lt;!-- pager plugin --&gt;

3
docs/index.html
View File

@ -517,7 +517,8 @@
<li><span class="results">&dagger;</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>) &amp; <a href="example-widget-bootstrap-theme.html">Bootstrap v3.x</a> (v2.4).</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>
</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>