library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

updated bootstrap demo - issue #111

Browse Source
This commit is contained in:
Mottie 2013-01-07 09:57:36 -06:00
parent 6eb36a6532
commit 3851ea9cbc
2 changed files with 28 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
README.md
View File

@ -36,6 +36,13 @@ tablesorter can successfully parse and sort many types of data including linked
View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Change). View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Change).
#### Version 2.7.1b (1/7/2013)
* Updated bootstrap demo
* It now properly removes the "table-striped" class when the zebra widget is enabled.
* The demo now uses the [`refreshWidgets` method](http://mottie.github.com/tablesorter/docs/index.html#refreshwidgets) (added in v2.4) to completely remove the zebra widget.
* Thanks to [potsky](https://github.com/Mottie/tablesorter/issues/111#issuecomment-11951369) for notifying me of this problem!
#### Version 2.7.1 (1/4/2013) #### Version 2.7.1 (1/4/2013)
* Added two internal parameters to always make sure we're targeting the correct elements. * Added two internal parameters to always make sure we're targeting the correct elements.

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

@ -28,7 +28,7 @@
$.extend($.tablesorter.themes.bootstrap, { $.extend($.tablesorter.themes.bootstrap, {
// these classes are added to the table. To see other table classes available, // these classes are added to the table. To see other table classes available,
// look here: http://twitter.github.com/bootstrap/base-css.html#tables // look here: http://twitter.github.com/bootstrap/base-css.html#tables
table : 'table table-bordered table-striped', table : 'table table-bordered',
header : 'bootstrap-header', // give the header a gradient background header : 'bootstrap-header', // give the header a gradient background
footerRow : '', footerRow : '',
footerCells: '', footerCells: '',
@ -46,7 +46,7 @@
// call the tablesorter plugin and apply the uitheme widget // call the tablesorter plugin and apply the uitheme widget
$("table").tablesorter({ $("table").tablesorter({
theme : "bootstrap", // this will theme : "bootstrap", // this will
debug: true,
widthFixed: true, widthFixed: true,
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon! headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
@ -97,31 +97,26 @@
txt = $(this).data('filter'); txt = $(this).data('filter');
$('table').find('.tablesorter-filter').val('').eq(col).val(txt); $('table').find('.tablesorter-filter').val('').eq(col).val(txt);
$('table').trigger('search', false); $('table').trigger('search', false);
// the commented out code below will filter the rows
// without adding text to the filter input
// ******************
// var filter = [];
// filter[col] = txt; // get text to filter
// $('table').trigger('search', [filter]);
}); });
// toggle zebra widget // toggle zebra widget
$('button.zebra').click(function(){ $('button.zebra').click(function(){
var t = $(this).find('i').hasClass('icon-ok'); var t = $(this).hasClass('btn-success');
if (t) { // if (t) {
// removing classes applied by the zebra widget // removing classes applied by the zebra widget
// you shouldn't ever need to use this code, it is only for this demo // you shouldn't ever need to use this code, it is only for this demo
$('table').find('tr').removeClass('odd even'); // $('table').find('tr').removeClass('odd even');
} // }
$('table')[0].config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"]; $('table')
.toggleClass('table-striped')[0]
.config.widgets = (t) ? ["uitheme", "filter"] : ["uitheme", "filter", "zebra"];
$(this) $(this)
.toggleClass('btn-danger btn-success') .toggleClass('btn-danger btn-success')
.find('i') .find('i')
.toggleClass('icon-ok icon-remove').end() .toggleClass('icon-ok icon-remove').end()
.find('span') .find('span')
.text(t ? 'disabled' : 'enabled'); .text(t ? 'disabled' : 'enabled');
$('table').trigger('applyWidgets'); $('table').trigger('refreshWidgets', [false]);
}); });
}); });
</script> </script>
@ -142,21 +137,25 @@
<span class="label label-info">NOTE!</span> <span class="label label-info">NOTE!</span>
<ul> <ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file. But you'll need to add the <code>&lt;i&gt;</code> into the header manually.</li> <li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file. But you'll need to add the <code>&lt;i&gt;</code> into the header manually.</li>
<li>You will need to modify the <code>headerTemplate</code> option to include the bootstrap icon! See the example in the code. <span class="tip"><em>New!</em></span> v2.7!</li> <li><span class="label label-success">New!</span> v2.7!
<ul>
<li><span class="label label-info">New!</span> In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use: <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><span class="label label-success">New!</span> In tablesorter v2.4, the <code>uitheme</code> option has changed to indicate the theme instead of an array of icons to use:
<ul> <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>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>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>"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> <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> </ul>
</li> </li>
<li>This demo shows how to get around an issue with the filter widget: <li>This demo shows how to get around an issue with the filter widget:
<ul> <ul>
<li>The <span class="label label-success">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>The <span class="label label-success">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 class="filter btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li> <li>To better understand this issue, disable the zebra widget (using the toggle button). Now <button class="filter btn btn-small btn-primary" data-column="5" data-filter=">80"><i class="icon-white icon-filter"></i> Filter ">80"</button> in the "Calculus" column.</li>
<li>Try other filter searches with the zebra widget disabled, like <button class="filter btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-filter"></i> Filter "male"</button> in the "Sex" column.</li> <li>Try other filter searches with the zebra widget disabled, like <button class="filter btn btn-small btn-primary" data-column="2" data-filter="male"><i class="icon-white icon-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 will over-ride the <code>nth-child()</code> styling.</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> <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> </ul>
</li> </li>