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

updated headerTemplate demos

Browse Source
This commit is contained in:
Mottie 2012-12-26 02:06:26 -06:00
parent 93578eddbc
commit c963f325e5
14 changed files with 84 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
README.md
View File

@ -36,6 +36,30 @@ tablesorter can successfully parse and sort many types of data including linked
View the [complete listing here](https://github.com/Mottie/tablesorter/wiki/Change).
#### Version 2.7 (12/26/2012)
* Added `headerTemplate` option:
* `headerTemplate` is a template string which allows adding additional content to the header while it is being built.
* This template string has two default tags: `{content}` and `{icon}`.
* `{content}` will be replaced by the current header HTML content.
* `{icon}` will be replaced by `<i class="tablesorter-icon"></i>`, but only if a class name is defined in the `cssIcon` option.
* Everything within this template string will be wrapped in a div with class `tablesorter-header-inner`.
* The default template is `{content}`.
* The following themes DO NEED the icon (`{icon}`) included in the template: Bootstrap, jQuery UI, Grey and Dropbox.
* Added `onRenderTemplate` option:
* This is a function that is called after the template string has been built, but before the template string is applied to the header and before the onRenderHeader function is called.
* The onRenderTemplate function receives a column index and template string parameters. The template string, from the headerTemplate option, will already have the {icon} and {content} tags replaced; it's just a string of formatted HTML. When done manipulating this string, return it.
* Check out the [demo here](http://mottie.github.com/tablesorter/docs/example-option-render-template.html).
* Updated `uitheme` widget
* The `uitheme` setting is no longer required, use the `theme` option instead.
* When using the `bootstrap` or `jui` theme, just add the name to the `theme` option: e.g. `theme: "bootstrap"`.
* The `uitheme` widget option will still work, but if the theme name exists within `$.tablesorter.themes` it will override the `uitheme` option.
* Look at the [theme demo](http://mottie.github.com/tablesorter/docs/themes.html) source for a better example.
* Fixed `sortReset` bug - see [issue #167](https://github.com/Mottie/tablesorter/issues/167).
* Fixed an issue with the pager resetting to the first page after every sort.
* Fixed javascript errors popping up when initializing the plugin on an empty table. Fixes [issue #206](https://github.com/Mottie/tablesorter/issues/206).
*
#### Version 2.6.2 (12/20/2012)
* Fixed sort breaking when `tfoot` contained a table. Fixes problem mentioned in [issue #196](https://github.com/Mottie/tablesorter/issues/196).

2
addons/pager/jquery.tablesorter.pager.js
View File

@ -1,6 +1,6 @@
/*!
* tablesorter pager plugin
* updated 12/20/2012
* updated 12/26/2012
*/
/*jshint browser:true, jquery:true, unused:false */
;(function($) {

4
addons/pager/jquery.tablesorter.pager.min.js vendored
View File

File diff suppressed because one or more lines are too long

7
docs/example-pager-ajax.html
View File

@ -130,6 +130,13 @@
});
});</script>
<script>
$(window).load(function(){
// allow THIS demo to sort the content; this variable is automatically set to true when ajax
// is used as there isn't any way to sort the server side data from the client side.
$('table')[0].config.serverSideSorting = false;
});
</script>
</head>
<body id="pager-demo">
<div id="banner">

1
docs/example-pager-filtered.html
View File

@ -45,6 +45,7 @@
$("table")
.tablesorter({
theme: 'blue',
headerTemplate : '{content} {icon}', // new in v2.7. Needed to add the bootstrap icon!
widthFixed: true,
widgets: ['zebra', 'filter']
})

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

@ -45,8 +45,12 @@
// call the tablesorter plugin and apply the uitheme widget
$("table").tablesorter({
theme : "bootstrap", // this will
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)
widgets : [ "uitheme", "filter", "zebra" ],
@ -60,7 +64,7 @@
filter_reset : ".reset",
// set the uitheme widget to use the bootstrap theme class names
uitheme : "bootstrap"
// uitheme : "bootstrap"
}
})
@ -137,7 +141,9 @@
<p class="tip">
<span class="label label-info">NOTE!</span>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</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-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:
<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>

3
docs/example-widget-sticky-header.html
View File

@ -35,6 +35,8 @@
widthFixed : true,
headerTemplate : '{content} {icon}', // Add icon for jui theme; new in v2.7!
widgets: ["columns", "filter", "stickyHeaders", "uitheme", "zebra"] , //[ 'uitheme', 'zebra', 'stickyHeaders' ],
widgetOptions: {
@ -94,6 +96,7 @@ $(function() {
<em>NOTE!</em>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</li>
<li>You will need to modify the <code>headerTemplate</code> option to include the jQuery UI icon! See the example in the code. <span class="tip"><em>New!</em></span> v2.7!</li>
<li>Scroll down the page to see the headers stick. Then sort the columns using the sticky headers!</li>
<li>Added <code>widgetOptions.stickyHeader</code> option which contains the css class name applied to the actual sticky header. <span class="tip"><em>New! v2.1</em></span></li>
<li>Multiple rows in the header will become sticky. <span class="tip"><em>New! v2.1.17</em></span></li>

3
docs/example-widget-ui-theme.html
View File

@ -46,6 +46,8 @@
// call the tablesorter plugin and apply the ui theme widget
$("table").tablesorter({
headerTemplate : '{content} {icon}', // needed to add icon for jui theme
// widget code now contained in the jquery.tablesorter.widgets.js file
widgets : ['uitheme', 'zebra', 'resizable'],
@ -78,6 +80,7 @@
<em>NOTE!</em>
<ul>
<li>This widget can be applied to the original plugin. The code is in the "jquery.tablesorter.widgets.js" file.</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>The original "widgetUitheme" option has been replaced by "widgetOptions.uitheme". See the javascript block below for more details (v2.1).</li>
<li><span class="tip"><em>New!</em></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>

28
docs/themes.html
View File

@ -46,25 +46,31 @@ $(function() {
$('.demo').tablesorter({
widthFixed : true,
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
sortList : [ [0,0],[1,0],[2,0] ]
});
// grey & dropbox themes need the {icon} for header icons
$('.tablesorter-dropbox,.tablesorter-grey').tablesorter({
widthFixed : true,
headerTemplate: '{content}{icon}', // dropbox theme doesn't like a space between the content & icon
widgets : ['zebra','columns'],
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.tablesorter-bootstrap').tablesorter({
theme : 'bootstrap',
widthFixed : true,
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'uitheme'],
widgetOptions : {
uitheme : 'bootstrap'
},
sortList : [ [0,0],[1,0],[2,0] ]
sortList : [ [0,0],[1,0],[2,0] ]
});
$('.tablesorter-jui').tablesorter({
theme : 'jui',
widthFixed : true,
headerTemplate: '{content} {icon}',
widgets : ['zebra','columns', 'uitheme'],
widgetOptions : {
uitheme : 'jui'
},
sortList : [ [0,0],[1,0],[2,0] ]
sortList : [ [0,0],[1,0],[2,0] ]
});
@ -148,7 +154,7 @@ $(function() {
</div>
<div class="minitable">
<h3>dropbox</h3>
<table class="demo tablesorter-dropbox">
<table class="tablesorter-dropbox">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>
@ -177,7 +183,7 @@ $(function() {
</div>
<div class="minitable">
<h3>grey</h3>
<table class="demo tablesorter-grey">
<table class="tablesorter-grey">
<thead><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></thead>
<tfoot><tr><th>A</th><th>B</th><th>C</th><th>D</th></tr></tfoot>
<tbody>

6
js/jquery.tablesorter.js
View File

@ -1,5 +1,5 @@
/*!
* TableSorter 2.6.2 - Client-side table sorting with ease!
* TableSorter 2.7 - Client-side table sorting with ease!
* @requires jQuery v1.2.6+
*
* Copyright (c) 2007 Christian Bach
@ -24,7 +24,7 @@
var ts = this;
ts.version = "2.6.2";
ts.version = "2.7";
ts.parsers = [];
ts.widgets = [];
@ -35,7 +35,7 @@
widthFixed : false, // adds colgroup to fix widths of columns
showProcessing : false, // show an indeterminate timer icon in the header when the table is sorted or filtered.
headerTemplate : '{content} {icon}', // header layout template (HTML ok); {content} = innerHTML, {icon} = <i/> (class from cssIcon)
headerTemplate : '{content}',// header layout template (HTML ok); {content} = innerHTML, {icon} = <i/> (class from cssIcon)
onRenderTemplate : null, // function(index, template){ return template; }, (template is a string)
onRenderHeader : null, // function(index){}, (nothing to return)

4
js/jquery.tablesorter.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/jquery.tablesorter.widgets.js
View File

@ -1,4 +1,4 @@
/*! tableSorter 2.4+ widgets - updated 12/18/2012
/*! tableSorter 2.4+ widgets - updated 12/26/2012
*
* Column Styles
* Column Filters

22
js/jquery.tablesorter.widgets.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "tablesorter",
"version": "2.6.1",
"version": "2.7",
"title": "tablesorter",
"author": {
"name": "Christian Bach",