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

Formatter: Add table cell formatting widget. See #812

Browse Source
This commit is contained in:
Mottie 2015-02-04 15:41:27 -06:00
parent b5f931ec17
commit 0e72504e87
4 changed files with 284 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/example-widget-editable.html
View File

@ -177,7 +177,7 @@ td.no-edit, span.no-edit {
<h3><a href="#">Options</a></h3>
<div>
<h4>Editable widget widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<h4>Editable widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<div>
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div>
@ -266,7 +266,7 @@ td.no-edit, span.no-edit {
})
// use delegated event binding
.on('giterdone', 'td', function(event, config){
// this = td; the event bubble up
// this = td; the event bubble up
console.log( 'new content = ' + $(this).text() );
});

225
docs/example-widget-formatter.html Normal file
View File

@ -0,0 +1,225 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery plugin: Tablesorter 2.0 - Formatter Widget</title>
<!-- jQuery -->
<script src="js/jquery-latest.min.js"></script>
<script>
// tweak "Added" column to keep recent dates
$(function(){
var d, t,
tweaks = [ 9e5, 8e8, 2e7, 0, 6e10, 1e11 ],
$t = $('#demo tbody'),
date = new Date().getTime();
$t.find('tr td:nth-child(4)').each(function(i){
d = new Date( date - tweaks[i] );
t = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear() + ' ' +
d.getHours() + ':' + d.getMinutes() + ':' + d.getSeconds();
$(this).html( t );
});
});
</script>
<!-- Demo stuff -->
<link class="ui-theme" rel="stylesheet" href="css/jquery-ui.min.css">
<script src="js/jquery-ui-latest.min.js"></script>
<link rel="stylesheet" href="css/jq.css">
<link href="css/prettify.css" rel="stylesheet">
<script src="js/prettify.js"></script>
<script src="js/docs.js"></script>
<!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css">
<link rel="stylesheet" href="../css/theme.ice.css">
<script src="../js/jquery.tablesorter.js"></script>
<script src="../js/widgets/widget-formatter.js"></script>
<style id="css">/* demo styling */
#table strong {
color: #a00;
}</style>
<script id="js">$(function() {
$('.tablesorter').tablesorter({
theme: 'blue',
widgets: ['formatter'],
widgetOptions: {
formatter_column: {
'.emphasize' : function( text, data ) {
return '<strong>' + text + '</strong>';
},
'.supercar' : function( text, data ) {
if ( text === '' ) { return ''; }
// replace table cell with a link
return '<a href="https://www.google.com/search?tbm=isch&q=' + text.replace(/\s/g, '+') + '">' + text + '</a>';
},
'.date' : function( text, data ) {
var date = new Date( text );
if ( date instanceof Date && isFinite( date ) ) {
data.$cell.attr( data.config.textAttribute, text );
return '<em>' + prettyDate( date ) + '</em>';
}
return text;
},
'.duckify' : function( text, data ) {
if ( text === '' ) { return ''; }
// add text to data-attribute; this overrides the parser
data.$cell.attr( data.config.textAttribute, text );
// replace table cell with a link
return '<a href="https://duckduckgo.com/?ia=images&q=' + text + '">Search The Duck</a>';
},
'.blue' : function( text, data ) {
return '<span class="blue">' + text + '</span>';
}
}
}
});
});
/*
* JavaScript Pretty Date (MODIFIED)
* Copyright (c) 2011 John Resig (ejohn.org)
* Licensed under the MIT and GPL licenses.
*/
function prettyDate(date){
var diff = (((new Date()).getTime() - date.getTime()) / 1000),
day_diff = Math.floor(diff / 86400);
if ( isNaN(day_diff) || day_diff < 0 ) { return ''; }
return day_diff == 0 && (
diff < 60 && 'just now' ||
diff < 120 && '1 minute ago' ||
diff < 3600 && Math.floor( diff / 60 ) + ' minutes ago' ||
diff < 7200 && '1 hour ago' ||
diff < 86400 && Math.floor( diff / 3600 ) + ' hours ago') ||
day_diff == 1 && 'Yesterday' ||
day_diff < 7 && day_diff + ' days ago' ||
day_diff < 61 && Math.ceil( day_diff / 7 ) + ' weeks ago' ||
day_diff < 730 && Math.floor( day_diff / 30 ) + ' months ago' ||
Math.floor( day_diff / 365 ) + ' years ago';
}</script>
</head>
<body>
<div id="banner">
<h1>table<em>sorter</em></h1>
<h2>Formatter Widget</h2>
<h3>Flexible client-side table sorting</h3>
<a href="index.html">Back to documentation</a>
</div>
<div id="main">
<p></p>
<br>
<div id="root" class="accordion">
<h3><a href="#">Notes</a></h3>
<div>
<ul>
<li>This widget will only work in tablesorter version 2.16+ and jQuery version 1.7+.</li>
<li>It allows you to add custom formatting to table columns.</li>
<li>You have the option of storing the original cell text within the table cell data-attribute to maintain the sort order.</li>
<li>This widget is not optimized for large tables; but it only runs on initialization and after any updates have occurred.</li>
</ul>
</div>
<h3><a href="#">Options</a></h3>
<div>
<h4>Formatter widget default options (added inside of tablesorter <code>widgetOptions</code>)</h4>
<!--
<div>
<span class="label label-info">TIP!</span> Click on the link in the function column to reveal full details (or <a href="#" class="toggleAll">toggle</a>|<a href="#" class="showAll">show</a>|<a href="#" class="hideAll">hide</a> all) or double click to update the browser location.
</div>
-->
<table class="tablesorter-blue">
<thead>
<tr><th class="option">Option</th><th class="sorter-false">Description</th></tr>
</thead>
<tbody>
<tr id="formatter-column">
<td><a href="#" class="permalink">formatter_column</a></td>
<td>Assign a formatting function by column index or column header class name; these functions only apply to the <code>tbody</code> cells.
<div> <!-- class="collapsible"> -->
<br>
Set up the formatter to return the HTML for the table cell.
<pre class="prettyprint lang-js">formatter_column: {
'.emphasize' : function( text, data ) {
return '<strong>' + text + '</strong>';
}
}</pre>
If the text in the cell is to be changed, but you don't want the sort to be effected, then add the original text into the data-attribute as follows:
<pre class="prettyprint lang-js">formatter_column: {
'.makesearch' : function( text, data ) {
// don't make a link if there is no text in the cell
if ( text === '' ) { return ''; }
// add text to data-attribute; this overrides the parser
data.$cell.attr( data.config.textAttribute, text );
// then replace text with a link
return '<a href="http://mysite.com?query=' + encodeURIComponent(text) + '">Get Definition</a>';
}
}</pre>
The <code>data</code> parameter provided to the <code>formatter_column</code> function contains the following information:
<pre class="prettyprint lang-js">data = {
config : table.config,
wo : table.config.widgetOptions,
$header : $('th'), // the header cell of the current column
$row : $('tr'), // jQuery object of the row currently being processed
$cell : $('td'), // jQuery object of the cell currently being processed
text : 'Batman', // the text from the current cell
columnIndex : 0 // the column index of the current cell
}</pre>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<p></p>
<h1>Demo</h1>
<div id="demo"><table id="table" class="tablesorter">
<thead>
<tr>
<th class="emphasize">Super Hero</th>
<th class="supercar">Super Car</th>
<th class="duckify">Image Links</th>
<th class="date">Added</th>
</tr>
</thead>
<tbody>
<!-- Added column dates are dynamically updated for this demo -->
<tr><td>Superman</td><td>Bugatti Veyron</td><td>Duckie</td><td>1/1/2015</td></tr>
<tr><td>Flash</td><td>Hennessey Venom</td><td>Horse</td><td>12/22/2014</td></td></tr>
<tr><td>Batman</td><td>Koenigsegg Agera</td><td>Elephant</td><td>3/10/2010</td></tr>
<tr><td>Green Lantern</td><td>SSC Ultimate Aero</td><td>Cow</td><td>5/5/2012</td></tr>
<tr><td>Howard the Duck</td><td>Koenigsegg CCX</td><td>Pizza</td><td>1/1/2005</td></tr>
<tr><td>Wonder Woman</td><td>McLaren F1</td><td>Tiger</td><td>3/1/2013</td></tr>
</tbody>
</table></div>
<h1>Javascript</h1>
<div id="javascript">
<pre class="prettyprint lang-javascript"></pre>
</div>
<h1>CSS</h1>
<div id="css">
<pre class="prettyprint lang-css"></pre>
</div>
<h1>HTML</h1>
<div id="html">
<pre class="prettyprint lang-html"></pre>
</div>
</div>
</body>
</html>

1
docs/index.html
View File

@ -484,6 +484,7 @@
<li>formatter: <a href="example-widget-filter-formatter-select2.html">select2</a> (<span class="version">v2.16.0</span>; <span class="version updated">v2.18.5</span>)</li>
</ul>
</li>
<li><a href="example-widget-formatter.html">Formatter widget</a> (<span class="version">v2.18.5</span>).</li>
<li>Grouping rows widget:
<ul>
<li><a href="example-widget-grouping.html">basic</a> (v2.8; <span class="version updated">v2.18.0</span>).</li>

56
js/widgets/widget-formatter.js Normal file
View File

@ -0,0 +1,56 @@
/*! tablesorter Formatter widget - 2/4/2015 (v2.18.5)
* Requires tablesorter v2.8+ and jQuery 1.7+
* by Rob Garrison
*/
/*jshint browser:true, jquery:true, unused:false */
/*global jQuery: false */
;(function($){
'use strict';
var ts = $.tablesorter;
ts.formatter = {
init : function( c ) {
c.$table.on( 'updateComplete.tsformatter', function() {
ts.formatter.setup( c );
});
ts.formatter.setup( c );
},
setup : function( c ) {
// do nothing for empty tables
if ( $.isEmptyObject( c.cache ) ) { return; }
var tbodyIndex, rowIndex, rows, len, column, formatter,
wo = c.widgetOptions,
data = { config: c, wo: wo };
for ( tbodyIndex = 0; tbodyIndex < c.$tbodies.length; tbodyIndex++ ){
rows = c.cache[ tbodyIndex ];
len = rows.normalized.length;
for ( rowIndex = 0; rowIndex < len; rowIndex++ ) {
data.$row = rows.normalized[ rowIndex ][ c.columns ].$row;
for ( column = 0; column < c.columns; column++ ) {
formatter = ts.getColumnData( c.table, wo.formatter_column, column );
if ( typeof formatter === 'function' ) {
data.columnIndex = column;
data.$header = c.$headers.filter('[data-column="' + column + '"]:last');
data.$cell = data.$row.children( 'th, td' ).eq( column );
// get text from attribute first, just in case we're updating
data.text = data.$cell.attr( c.textAttribute ) || data.$cell[0].textContent || data.$cell.text();
data.$cell.html( formatter( data.text, data ) );
}
}
}
}
}
};
ts.addWidget({
id: 'formatter',
priority: 100,
options: {
formatter_column: {}
},
init: function( table ) {
ts.formatter.init( table.config );
}
});
})( jQuery );