mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Core: Add triggered removeWidget method & update docs
Docs for applyWidgetId also updated
This commit is contained in:
Rob Garrison
parent
ab07e59b8f
commit
84d4f72ad3
@ -16,26 +16,35 @@
|
||||
<!-- Tablesorter: required -->
|
||||
<link rel="stylesheet" href="../css/theme.blue.css">
|
||||
<script src="../js/jquery.tablesorter.js"></script>
|
||||
<script src="../js/jquery.tablesorter.widgets.js"></script>
|
||||
|
||||
<script id="js">$(function() {
|
||||
|
||||
// call the tablesorter plugin
|
||||
$("table").tablesorter({ theme : 'blue' });
|
||||
$('table').tablesorter({ theme : 'blue' });
|
||||
|
||||
$("button.applyid").click(function(){
|
||||
// This method needs to be applied after each sort
|
||||
$('table').trigger('applyWidgetId', ['zebra']);
|
||||
$('button.applyid').click(function(){
|
||||
// This method adds the 'columns' widget & sorts the table to make it visible
|
||||
$('table')
|
||||
.trigger('applyWidgetId', 'columns')
|
||||
.trigger('sorton', [ [[0,0]] ]);
|
||||
return false;
|
||||
});
|
||||
|
||||
$("button.apply").click(function(){
|
||||
// Update the list of widgets to apply to the table (add or remove)
|
||||
$("table").data("tablesorter").widgets = ["zebra"];
|
||||
// This method applies the widget - no need to keep updating
|
||||
$('button.apply').click(function(){
|
||||
// This method reapplies the widgets listed in table.config.widgets
|
||||
// it won't appear to do anything unless we add 'zebra' to the widgets option
|
||||
$('table').data('tablesorter').widgets = ['zebra'];
|
||||
$('table').trigger('applyWidgets');
|
||||
return false;
|
||||
});
|
||||
|
||||
$('button.remove').click(function(){
|
||||
// This method removes both the zebra & columns widget entirely
|
||||
$('table').trigger('removeWidget', 'zebra columns');
|
||||
return false;
|
||||
});
|
||||
|
||||
});</script>
|
||||
</head>
|
||||
<body>
|
||||
@ -48,65 +57,30 @@
|
||||
<div id="main">
|
||||
|
||||
<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>
|
||||
|
||||
<h1>Demo</h1>
|
||||
<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 & 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">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>First Name</th>
|
||||
<th>Last Name</th>
|
||||
<th>Age</th>
|
||||
<th>Total</th>
|
||||
<th>Discount</th>
|
||||
<th>Date</th>
|
||||
</tr>
|
||||
<tr><th>First Name</th><th>Last Name</th><th>Age</th><th>Total</th><th>Discount</th><th>Date</th></tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
<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>
|
||||
</table></div>
|
||||
|
||||
@ -128,4 +102,3 @@
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
@ -5071,15 +5071,20 @@ $.tablesorter.updateCell( config, $cell, resort, callback );</pre>
|
||||
|
||||
<tr id="applywidgetid">
|
||||
<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">
|
||||
<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(){
|
||||
// initialize tablesorter without the widget
|
||||
$("table").tablesorter();
|
||||
|
||||
// click a button to apply the zebra striping
|
||||
$("button").click(function(){
|
||||
$('table').trigger('applyWidgetId', ['zebra']);
|
||||
$('table').trigger('applyWidgetId', 'zebra');
|
||||
return false;
|
||||
});
|
||||
|
||||
@ -5092,18 +5097,50 @@ $.tablesorter.updateCell( config, $cell, resort, callback );</pre>
|
||||
<td><a href="#" class="permalink">applyWidgets</a></td>
|
||||
<td>Apply the set widgets to the table (<span class="version updated">v2.16.0</span>).
|
||||
<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.
|
||||
<pre class="prettyprint lang-js">// Update the list of widgets to apply to the table (add or remove)
|
||||
// $("table").data("tablesorter").widgets = ["zebra"]; // works the same as
|
||||
$("table")[0].config.widgets = ["zebra"];
|
||||
|
||||
// This method applies the widget - no need to keep updating
|
||||
<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">// This method applies the widgets already added to tablesorter
|
||||
$('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>
|
||||
</td>
|
||||
<td><a href="example-apply-widget.html">Example</a></td>
|
||||
</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">
|
||||
<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>).
|
||||
|
||||
@ -405,6 +405,10 @@
|
||||
e.stopPropagation();
|
||||
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 ) {
|
||||
e.stopPropagation();
|
||||
ts.destroy( this, removeClasses, callback );
|
||||
@ -2344,10 +2348,11 @@
|
||||
}
|
||||
// remove widget added rows, just in case
|
||||
$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 ' +
|
||||
'appendCache updateCache applyWidgetId applyWidgets refreshWidgets destroy mouseup mouseleave keypress ' +
|
||||
'sortBegin sortEnd resetToLoadState '.split( ' ' )
|
||||
'appendCache updateCache applyWidgetId applyWidgets refreshWidgets removeWidget destroy mouseup mouseleave ' +
|
||||
'keypress sortBegin sortEnd resetToLoadState '.split( ' ' )
|
||||
.join( c.namespace + ' ' );
|
||||
$t
|
||||
.removeData( 'tablesorter' )
|
||||
|
||||
Loading…
Reference in New Issue
Block a user