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

Core: Add triggered removeWidget method & update docs

Browse Source 
Docs for applyWidgetId also updated
This commit is contained in:
Rob Garrison 2015-12-10 22:51:33 -06:00
parent ab07e59b8f
commit 84d4f72ad3
3 changed files with 85 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
docs/example-apply-widget.html
View File

@ -16,26 +16,35 @@
<!-- Tablesorter: required --> <!-- Tablesorter: required -->
<link rel="stylesheet" href="../css/theme.blue.css"> <link rel="stylesheet" href="../css/theme.blue.css">
<script src="../js/jquery.tablesorter.js"></script> <script src="../js/jquery.tablesorter.js"></script>
<script src="../js/jquery.tablesorter.widgets.js"></script>
<script id="js">$(function() { <script id="js">$(function() {
// call the tablesorter plugin // call the tablesorter plugin
$("table").tablesorter({ theme : 'blue' }); $('table').tablesorter({ theme : 'blue' });
$("button.applyid").click(function(){ $('button.applyid').click(function(){
// This method needs to be applied after each sort // This method adds the 'columns' widget & sorts the table to make it visible
$('table').trigger('applyWidgetId', ['zebra']); $('table')
.trigger('applyWidgetId', 'columns')
.trigger('sorton', [ [[0,0]] ]);
return false; return false;
}); });
$("button.apply").click(function(){ $('button.apply').click(function(){
// Update the list of widgets to apply to the table (add or remove) // This method reapplies the widgets listed in table.config.widgets
$("table").data("tablesorter").widgets = ["zebra"]; // it won't appear to do anything unless we add 'zebra' to the widgets option
// This method applies the widget - no need to keep updating $('table').data('tablesorter').widgets = ['zebra'];
$('table').trigger('applyWidgets'); $('table').trigger('applyWidgets');
return false; return false;
}); });
$('button.remove').click(function(){
// This method removes both the zebra & columns widget entirely
$('table').trigger('removeWidget', 'zebra columns');
return false;
});
});</script> });</script>
</head> </head>
<body> <body>
@ -48,65 +57,30 @@
<div id="main"> <div id="main">
<p class="tip"> <p class="tip">
<em>NOTE!</em> Click on [ Apply Widget Id ], then sort the table a few times... then click on [ Apply Widgets ] and sort again (these methods <strong>are</strong> part of the original plugin). <em>NOTE!</em>
<p>As of <span class="version updated">v2.24.7</span>, using the <code>applyWidgetId</code> will now add the widget to the <code>widgets</code> options, so you will no longer notice any difference between the two methods. The difference is:</p>
<ul>
<li><code>applyWidgets</code> - updates all widgets currently listed in the <code>table.config.widgets</code> option (this occurs every time the user sorts or filters the table).</li>
<li><code>applyWidgetId</code> - Adds (initializes and updates) the named widget. If the widget was not previously included in the <code>table.config.widgets</code> option, it will be added (<span class="version updated">v2.24.7</span>). If the widget is included in the widgets option, then only the named widget will be updated.</li>
</ul>
</p> </p>
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
<div id="demo"><button type="button" class="applyid">Apply Widget Id</button> <button type="button" class="apply">Apply Widgets</button> <div id="demo"><button type="button" class="applyid">Apply Widget Id</button> (columns & sort)<br>
<button type="button" class="remove">Remove Widget</button> (columns &amp; zebra)<br>
<button type="button" class="apply">Apply Widgets</button> (add 'zebra' to <code>table.config.widgets</code> then trigger <code>applyWidgets</code> method)
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>
<tr> <tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
<th>First Name</th>
<th>Last Name</th>
<th>Age</th>
<th>Total</th>
<th>Discount</th>
<th>Date</th>
</tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr><td>Peter</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2006 8:14 AM</td></tr>
<td>Peter</td> <tr><td>John</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2002 5:14 AM</td></tr>
<td>Parker</td> <tr><td>Clark</td><td>Kent</td><td>18</td><td>$15.89</td><td>44%</td><td>Jan 12, 2003 11:14 AM</td></tr>
<td>28</td> <tr><td>Bruce</td><td>Almighty</td><td>45</td><td>$153.19</td><td>44%</td><td>Jan 18, 2001 9:12 AM</td></tr>
<td>$9.99</td> <tr><td>Bruce</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2007 9:12 AM</td></tr>
<td>20%</td>
<td>Jul 6, 2006 8:14 AM</td>
</tr>
<tr>
<td>John</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2002 5:14 AM</td>
</tr>
<tr>
<td>Clark</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>44%</td>
<td>Jan 12, 2003 11:14 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Almighty</td>
<td>45</td>
<td>$153.19</td>
<td>44%</td>
<td>Jan 18, 2001 9:12 AM</td>
</tr>
<tr>
<td>Bruce</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2007 9:12 AM</td>
</tr>
</tbody> </tbody>
</table></div> </table></div>
@ -128,4 +102,3 @@
</body> </body>
</html> </html>

53
docs/index.html
View File

@ -5071,15 +5071,20 @@ $.tablesorter.updateCell( config, $cell, resort, callback );</pre>
<tr id="applywidgetid"> <tr id="applywidgetid">
<td><a href="#" class="permalink">applyWidgetId</a></td> <td><a href="#" class="permalink">applyWidgetId</a></td>
<td>Apply the selected widget to the table, but the widget will not continue to be applied after each sort. See the example, it's easier than describing it. <td>Apply the selected widget to the table, but the widget will not continue to be applied after each sort. See the example, it's easier than describing it (<span class="version updated">v2.24.7</span>).
<div class="collapsible"> <div class="collapsible">
<p>In <span class="version updated">v2.24.7</span>, this method ensures that the widget initialization code is executed as well as the format function. So now a widget that was not previously initialized or had been previously removed, can be reapplied.</p>
<p>Only <em>one</em> widget can be applied at a time using this method.</p>
<h4>Direct method:</h4>
<pre class="prettyprint lang-js">$.tablesorter.applyWidgetId( $( 'table' ), 'zebra' );</pre>
<h4>Triggered event method:</h4>
<pre class="prettyprint lang-js">$(function(){ <pre class="prettyprint lang-js">$(function(){
// initialize tablesorter without the widget // initialize tablesorter without the widget
$("table").tablesorter(); $("table").tablesorter();
// click a button to apply the zebra striping // click a button to apply the zebra striping
$("button").click(function(){ $("button").click(function(){
$('table').trigger('applyWidgetId', ['zebra']); $('table').trigger('applyWidgetId', 'zebra');
return false; return false;
}); });
@ -5092,18 +5097,50 @@ $.tablesorter.updateCell( config, $cell, resort, callback );</pre>
<td><a href="#" class="permalink">applyWidgets</a></td> <td><a href="#" class="permalink">applyWidgets</a></td>
<td>Apply the set widgets to the table (<span class="version updated">v2.16.0</span>). <td>Apply the set widgets to the table (<span class="version updated">v2.16.0</span>).
<div class="collapsible"> <div class="collapsible">
This method can be used after a table has been initialized, but it won't work unless you update the configuration settings. See the example, it's easier than describing it. <p>This method only updates the widgets listed in the <a href="#widgets"><code>table.config.widgets</code></a> option.</p>
<pre class="prettyprint lang-js">// Update the list of widgets to apply to the table (add or remove) <pre class="prettyprint lang-js">// This method applies the widgets already added to tablesorter
// $("table").data("tablesorter").widgets = ["zebra"]; // works the same as
$("table")[0].config.widgets = ["zebra"];
// This method applies the widget - no need to keep updating
$('table').trigger('applyWidgets'); $('table').trigger('applyWidgets');
</pre>
Use this method can be used to add multiple widgets to the table.
<pre class="prettyprint lang-js">var $table = $( 'table' );
$table[0].config.widgets = [ 'zebra', 'columns' ];
$table.trigger('applyWidgets');
</pre></div> </pre></div>
</td> </td>
<td><a href="example-apply-widget.html">Example</a></td> <td><a href="example-apply-widget.html">Example</a></td>
</tr> </tr>
<tr id="removewidget">
<td><a href="#" class="permalink">removeWidget</a></td>
<td>Remove the named widget from the table (<span class="version">v2.24.7</span>).
<div class="collapsible">
<p>This method will remove the named widget(s) from the table.</p>
<h4>Direct method:</h4>
<pre class="prettyprint lang-js">$.tablesorter.removeWidget( $( 'table' ), widget );</pre>
<h4>Triggered event method:</h4>
<pre class="prettyprint lang-js">$( 'table' ).trigger( 'removeWidget', widget );</pre>
<p>The <code>widget</code> parameter can be used as follows:</p>
<ul>
<li>Single widget name - string
<pre class="prettyprint lang-js">// only remove zebra widget
$( 'table' ).trigger( 'removeWidget', 'zebra' );</pre>
</li>
<li>Multiple widgets names - array or string (space or comma separated)
<pre class="prettyprint lang-js">// remove multiple widgets (the below methods are all equivalent)
$( 'table' ).trigger( 'removeWidget', 'zebra columns' );
$( 'table' ).trigger( 'removeWidget', 'zebra, columns' );
$( 'table' ).trigger( 'removeWidget', [ 'zebra', 'columns' ] );</pre>
</li>
<li><code>true</code> - boolean (removes all widgets; passing <code>false</code> does nothing)
<pre class="prettyprint lang-js">// remove all widgets
$( 'table' ).trigger( 'removeWidget', true );</pre>
</li>
</ul>
</div>
</td>
<td><a href="example-apply-widget.html">Example</a></td>
</tr>
<tr id="destroy"> <tr id="destroy">
<td><a href="#" class="permalink">destroy</a></td> <td><a href="#" class="permalink">destroy</a></td>
<td>Use this method to remove tablesorter from the table (v2.3.2; <span class="version updated">v2.16</span>). <td>Use this method to remove tablesorter from the table (v2.3.2; <span class="version updated">v2.16</span>).

11
js/jquery.tablesorter.js
View File

@ -405,6 +405,10 @@
e.stopPropagation(); e.stopPropagation();
ts.refreshWidgets( this, all, dontapply ); ts.refreshWidgets( this, all, dontapply );
}) })
.bind( 'removeWidget' + namespace, function( e, name, refreshing ) {
e.stopPropagation();
ts.removeWidget( this, name, refreshing );
})
.bind( 'destroy' + namespace, function( e, removeClasses, callback ) { .bind( 'destroy' + namespace, function( e, removeClasses, callback ) {
e.stopPropagation(); e.stopPropagation();
ts.destroy( this, removeClasses, callback ); ts.destroy( this, removeClasses, callback );
@ -2344,10 +2348,11 @@
} }
// remove widget added rows, just in case // remove widget added rows, just in case
$h.find( 'tr' ).not( $r ).remove(); $h.find( 'tr' ).not( $r ).remove();
// disable tablesorter // disable tablesorter - not using .unbind( namespace ) because namespacing was
// added in jQuery v1.4.3 - see http://api.jquery.com/event.namespace/
events = 'sortReset update updateRows updateAll updateHeaders updateCell addRows updateComplete sorton ' + events = 'sortReset update updateRows updateAll updateHeaders updateCell addRows updateComplete sorton ' +
'appendCache updateCache applyWidgetId applyWidgets refreshWidgets destroy mouseup mouseleave keypress ' + 'appendCache updateCache applyWidgetId applyWidgets refreshWidgets removeWidget destroy mouseup mouseleave ' +
'sortBegin sortEnd resetToLoadState '.split( ' ' ) 'keypress sortBegin sortEnd resetToLoadState '.split( ' ' )
.join( c.namespace + ' ' ); .join( c.namespace + ' ' );
$t $t
.removeData( 'tablesorter' ) .removeData( 'tablesorter' )