added button type and return false to prevent IE form submit; see issue #285

This commit is contained in:
Mottie 2013-05-16 10:25:14 -05:00
parent 5cd91b9901
commit aad21bbf24
19 changed files with 224 additions and 295 deletions

View File

@ -60,7 +60,7 @@ div.digg {float: right;}
#pager-demo button.remove { width: 20px; height: 20px; font-size: 10px; color: #800; } #pager-demo button.remove { width: 20px; height: 20px; font-size: 10px; color: #800; }
.box { width: 48%; min-width: 300px; float: left; padding: 0 1%; } .box { width: 48%; min-width: 300px; float: left; padding: 0 1%; }
a.deprecated { color: #a00; } a.deprecated { color: #a00; }
span.deprecated { background: #a00; color: #fff; padding: 1px 3px; } span.deprecated,.alert { background: #a00; color: #fff; padding: 1px 3px; }
.hidden { display: none; } .hidden { display: none; }
.results { color: red; } .results { color: red; }
.clear { clear: both; } .clear { clear: both; }

View File

@ -39,6 +39,7 @@
$('table') $('table')
.find('tbody').append($row) .find('tbody').append($row)
.trigger('addRows', [$row, resort]); .trigger('addRows', [$row, resort]);
return false;
}); });
});</script> });</script>
@ -66,7 +67,7 @@
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
<button>Add Rows</button> <button type="button">Add Rows</button>
<br> <br>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>

View File

@ -25,6 +25,7 @@
$("button.applyid").click(function(){ $("button.applyid").click(function(){
// This method needs to be applied after each sort // This method needs to be applied after each sort
$('table').trigger('applyWidgetId', ['zebra']); $('table').trigger('applyWidgetId', ['zebra']);
return false;
}); });
$("button.apply").click(function(){ $("button.apply").click(function(){
@ -32,6 +33,7 @@
$("table").data("tablesorter").widgets = ["zebra"]; $("table").data("tablesorter").widgets = ["zebra"];
// This method applies the widget - no need to keep updating // This method applies the widget - no need to keep updating
$('table').trigger('applyWidgets'); $('table').trigger('applyWidgets');
return false;
}); });
});</script> });</script>
@ -51,7 +53,7 @@
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
<div id="demo"><button class="applyid">Apply Widget Id</button> <button class="apply">Apply Widgets</button> <div id="demo"><button type="button" class="applyid">Apply Widget Id</button> <button type="button" class="apply">Apply Widgets</button>
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>

View File

@ -65,6 +65,7 @@
$('.state').html(o.toString()); $('.state').html(o.toString());
// update filter; include false parameter to force a new search // update filter; include false parameter to force a new search
$('input.tablesorter-filter').trigger('search', false); $('input.tablesorter-filter').trigger('search', false);
return false;
}); });
});</script> });</script>
@ -90,7 +91,7 @@
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
<div id="demo"><button class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span> <div id="demo"><button type="button" class="toggle-option">Toggle Child Row Content</button> : <span class="state">true</span>
<ul> <ul>
<li>If true, the child row content is included in ALL filters. Enter "cal" (california) in any column filter and the same rows show up.</li> <li>If true, the child row content is included in ALL filters. Enter "cal" (california) in any column filter and the same rows show up.</li>

View File

@ -26,6 +26,7 @@
$('button').click(function(){ $('button').click(function(){
$('table').trigger('sortReset'); $('table').trigger('sortReset');
return false;
}); });
});</script> });</script>
@ -49,7 +50,7 @@
</p> </p>
<h1>Demo</h1> <h1>Demo</h1>
<button>Reset</button> <button type="button">Reset</button>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>
<tr> <tr>

View File

@ -47,9 +47,10 @@
$('button').click(function(){ $('button').click(function(){
var search = $(this).attr('data-search').split(','); var search = $(this).attr('data-search').split(',');
$('table').trigger('search', [search]); $('table').trigger('search', [search]);
return false;
}); });
}); </script> });</script>
</head> </head>
<body> <body>
@ -77,9 +78,9 @@
<h1>Demo</h1> <h1>Demo</h1>
<!-- ",l,f,>80".split(",") ends up as an array [ "", "l", "f", ">80" ] --> <!-- ",l,f,>80".split(",") ends up as an array [ "", "l", "f", ">80" ] -->
<button data-search=",l,f,>80">Filter</button> (females majoring in languages with a score >80)<br> <button type="button" data-search=",l,f,>80">Filter</button> (females majoring in languages with a score >80)<br>
<button data-search=",l,!female,>80">Filter</button> (males majoring in languages with a score >80)<br> <button type="button" data-search=",l,!female,>80">Filter</button> (males majoring in languages with a score >80)<br>
<button class="reset">Reset</button> <button type="button" class="reset">Reset</button>
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>

View File

@ -59,8 +59,8 @@
// present in the table when the pager is applied ("removeRows" is false) // present in the table when the pager is applied ("removeRows" is false)
// *********************************************************************** // ***********************************************************************
var r, $row, num = 50, var r, $row, num = 50,
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button class="remove" title="Remove this row">X</button></td></tr>' + row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button class="remove" title="Remove this row">X</button></td></tr>'; '<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
$('button:contains(Add)').click(function(){ $('button:contains(Add)').click(function(){
// add two rows of random data! // add two rows of random data!
r = row.replace(/\{[gijmr]\}/g, function(m){ r = row.replace(/\{[gijmr]\}/g, function(m){
@ -77,6 +77,7 @@
$('table') $('table')
.find('tbody').append($row) .find('tbody').append($row)
.trigger('addRows', [$row]); .trigger('addRows', [$row]);
return false;
}); });
// Delete a row // Delete a row
@ -103,6 +104,7 @@
$('table').tablesorterPager(pagerOptions); $('table').tablesorterPager(pagerOptions);
$t.text('Destroy Pager'); $t.text('Destroy Pager');
} }
return false;
}); });
// Disable / Enable // Disable / Enable
@ -111,6 +113,7 @@
var mode = /Disable/.test( $(this).text() ); var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager'); $('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager'); $(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
return false;
}); });
$('table').bind('pagerChange', function(){ $('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted. // pager automatically enables when table is sorted.
@ -140,7 +143,7 @@
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
<button>Add Rows</button> <button class="toggle">Disable Pager</button> <button>Destroy Pager</button> <button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
<br><br> <br><br>
<div class="pager"> <div class="pager">
Page: <select class="gotoPage"></select> Page: <select class="gotoPage"></select>
@ -191,7 +194,7 @@
<td>70</td> <td>70</td>
<td>75</td> <td>75</td>
<td>80</td> <td>80</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student02</td> <td>Student02</td>
@ -201,7 +204,7 @@
<td>88</td> <td>88</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student03</td> <td>Student03</td>
@ -211,7 +214,7 @@
<td>95</td> <td>95</td>
<td>80</td> <td>80</td>
<td>85</td> <td>85</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student04</td> <td>Student04</td>
@ -221,7 +224,7 @@
<td>55</td> <td>55</td>
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student05</td> <td>Student05</td>
@ -231,7 +234,7 @@
<td>80</td> <td>80</td>
<td>95</td> <td>95</td>
<td>80</td> <td>80</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student06</td> <td>Student06</td>
@ -241,7 +244,7 @@
<td>99</td> <td>99</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student07</td> <td>Student07</td>
@ -251,7 +254,7 @@
<td>68</td> <td>68</td>
<td>90</td> <td>90</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student08</td> <td>Student08</td>
@ -261,7 +264,7 @@
<td>90</td> <td>90</td>
<td>90</td> <td>90</td>
<td>85</td> <td>85</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student09</td> <td>Student09</td>
@ -271,7 +274,7 @@
<td>50</td> <td>50</td>
<td>65</td> <td>65</td>
<td>75</td> <td>75</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student10</td> <td>Student10</td>
@ -281,7 +284,7 @@
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student11</td> <td>Student11</td>
@ -291,7 +294,7 @@
<td>85</td> <td>85</td>
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student12</td> <td>Student12</td>
@ -301,7 +304,7 @@
<td>75</td> <td>75</td>
<td>70</td> <td>70</td>
<td>85</td> <td>85</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student13</td> <td>Student13</td>
@ -311,7 +314,7 @@
<td>80</td> <td>80</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student14</td> <td>Student14</td>
@ -321,7 +324,7 @@
<td>45</td> <td>45</td>
<td>55</td> <td>55</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student15</td> <td>Student15</td>
@ -331,7 +334,7 @@
<td>35</td> <td>35</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student16</td> <td>Student16</td>
@ -341,7 +344,7 @@
<td>50</td> <td>50</td>
<td>30</td> <td>30</td>
<td>70</td> <td>70</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student17</td> <td>Student17</td>
@ -351,7 +354,7 @@
<td>100</td> <td>100</td>
<td>55</td> <td>55</td>
<td>65</td> <td>65</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student18</td> <td>Student18</td>
@ -361,7 +364,7 @@
<td>49</td> <td>49</td>
<td>55</td> <td>55</td>
<td>75</td> <td>75</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student19</td> <td>Student19</td>
@ -371,7 +374,7 @@
<td>90</td> <td>90</td>
<td>88</td> <td>88</td>
<td>70</td> <td>70</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student20</td> <td>Student20</td>
@ -381,7 +384,7 @@
<td>45</td> <td>45</td>
<td>40</td> <td>40</td>
<td>80</td> <td>80</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student21</td> <td>Student21</td>
@ -391,7 +394,7 @@
<td>45</td> <td>45</td>
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student22</td> <td>Student22</td>
@ -401,36 +404,36 @@
<td>99</td> <td>99</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
</tbody> </tbody>
</table> </table>

View File

@ -112,8 +112,8 @@
// present in the table when the pager is applied ("removeRows" is false) // present in the table when the pager is applied ("removeRows" is false)
// *********************************************************************** // ***********************************************************************
var r, $row, num = 50, var r, $row, num = 50,
row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button class="remove" title="Remove this row">X</button></td></tr>' + row = '<tr><td>Student{i}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>' +
'<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button class="remove" title="Remove this row">X</button></td></tr>'; '<tr><td>Student{j}</td><td>{m}</td><td>{g}</td><td>{r}</td><td>{r}</td><td>{r}</td><td>{r}</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>';
$('button:contains(Add)').click(function(){ $('button:contains(Add)').click(function(){
// add two rows of random data! // add two rows of random data!
r = row.replace(/\{[gijmr]\}/g, function(m){ r = row.replace(/\{[gijmr]\}/g, function(m){
@ -130,6 +130,7 @@
$('table') $('table')
.find('tbody').append($row) .find('tbody').append($row)
.trigger('addRows', [$row]); .trigger('addRows', [$row]);
return false;
}); });
// Delete a row // Delete a row
@ -143,6 +144,7 @@
// restore pager // restore pager
// t.trigger('enable.pager'); // t.trigger('enable.pager');
t.trigger('update'); t.trigger('update');
return false;
}); });
// Destroy pager / Restore pager // Destroy pager / Restore pager
@ -157,6 +159,7 @@
$('table').tablesorterPager(pagerOptions); $('table').tablesorterPager(pagerOptions);
$t.text('Destroy Pager'); $t.text('Destroy Pager');
} }
return false;
}); });
// Disable / Enable // Disable / Enable
@ -165,6 +168,7 @@
var mode = /Disable/.test( $(this).text() ); var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager'); $('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + 'Pager'); $(this).text( (mode ? 'Enable' : 'Disable') + 'Pager');
return false;
}); });
$('table').bind('pagerChange', function(){ $('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted. // pager automatically enables when table is sorted.
@ -200,7 +204,7 @@
<h1>Demo</h1> <h1>Demo</h1>
<br> <br>
<button>Add Rows</button> <button class="toggle">Disable Pager</button> <button>Destroy Pager</button> <button type="button">Add Rows</button> <button type="button" class="toggle">Disable Pager</button> <button type="button">Destroy Pager</button>
<br><br> <br><br>
<div class="pager"> <div class="pager">
<img src="../addons/pager/icons/first.png" class="first" alt="First" /> <img src="../addons/pager/icons/first.png" class="first" alt="First" />
@ -251,7 +255,7 @@
<td>70</td> <td>70</td>
<td>75</td> <td>75</td>
<td>80</td> <td>80</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student02</td> <td>Student02</td>
@ -261,7 +265,7 @@
<td>88</td> <td>88</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student03</td> <td>Student03</td>
@ -271,7 +275,7 @@
<td>95</td> <td>95</td>
<td>80</td> <td>80</td>
<td>85</td> <td>85</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student04</td> <td>Student04</td>
@ -281,7 +285,7 @@
<td>55</td> <td>55</td>
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student05</td> <td>Student05</td>
@ -291,7 +295,7 @@
<td>80</td> <td>80</td>
<td>95</td> <td>95</td>
<td>80</td> <td>80</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student06</td> <td>Student06</td>
@ -301,7 +305,7 @@
<td>99</td> <td>99</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student07</td> <td>Student07</td>
@ -311,7 +315,7 @@
<td>68</td> <td>68</td>
<td>90</td> <td>90</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student08</td> <td>Student08</td>
@ -321,7 +325,7 @@
<td>90</td> <td>90</td>
<td>90</td> <td>90</td>
<td>85</td> <td>85</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student09</td> <td>Student09</td>
@ -331,7 +335,7 @@
<td>50</td> <td>50</td>
<td>65</td> <td>65</td>
<td>75</td> <td>75</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student10</td> <td>Student10</td>
@ -341,7 +345,7 @@
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student11</td> <td>Student11</td>
@ -351,7 +355,7 @@
<td>85</td> <td>85</td>
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student12</td> <td>Student12</td>
@ -361,7 +365,7 @@
<td>75</td> <td>75</td>
<td>70</td> <td>70</td>
<td>85</td> <td>85</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student13</td> <td>Student13</td>
@ -371,7 +375,7 @@
<td>80</td> <td>80</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student14</td> <td>Student14</td>
@ -381,7 +385,7 @@
<td>45</td> <td>45</td>
<td>55</td> <td>55</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student15</td> <td>Student15</td>
@ -391,7 +395,7 @@
<td>35</td> <td>35</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student16</td> <td>Student16</td>
@ -401,7 +405,7 @@
<td>50</td> <td>50</td>
<td>30</td> <td>30</td>
<td>70</td> <td>70</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student17</td> <td>Student17</td>
@ -411,7 +415,7 @@
<td>100</td> <td>100</td>
<td>55</td> <td>55</td>
<td>65</td> <td>65</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student18</td> <td>Student18</td>
@ -421,7 +425,7 @@
<td>49</td> <td>49</td>
<td>55</td> <td>55</td>
<td>75</td> <td>75</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student19</td> <td>Student19</td>
@ -431,7 +435,7 @@
<td>90</td> <td>90</td>
<td>88</td> <td>88</td>
<td>70</td> <td>70</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student20</td> <td>Student20</td>
@ -441,7 +445,7 @@
<td>45</td> <td>45</td>
<td>40</td> <td>40</td>
<td>80</td> <td>80</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student21</td> <td>Student21</td>
@ -451,7 +455,7 @@
<td>45</td> <td>45</td>
<td>100</td> <td>100</td>
<td>100</td> <td>100</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr> <tr>
<td>Student22</td> <td>Student22</td>
@ -461,36 +465,36 @@
<td>99</td> <td>99</td>
<td>100</td> <td>100</td>
<td>90</td> <td>90</td>
<td><button class="remove" title="Remove this row">X</button></td> <td><button type="button" class="remove" title="Remove this row">X</button></td>
</tr> </tr>
<tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student27</td><td>Mathematics</td><td>male</td><td>86</td><td>82</td><td>69</td><td>23</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student28</td><td>Languages</td><td>female</td><td>44</td><td>25</td><td>43</td><td>1</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student29</td><td>Mathematics</td><td>male</td><td>77</td><td>47</td><td>22</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student30</td><td>Languages</td><td>female</td><td>19</td><td>35</td><td>23</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student31</td><td>Mathematics</td><td>male</td><td>90</td><td>27</td><td>17</td><td>50</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student32</td><td>Languages</td><td>female</td><td>60</td><td>75</td><td>33</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student33</td><td>Mathematics</td><td>male</td><td>4</td><td>31</td><td>37</td><td>15</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student34</td><td>Languages</td><td>female</td><td>77</td><td>97</td><td>81</td><td>44</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student35</td><td>Mathematics</td><td>male</td><td>5</td><td>81</td><td>51</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student36</td><td>Languages</td><td>female</td><td>70</td><td>61</td><td>70</td><td>94</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student37</td><td>Mathematics</td><td>male</td><td>60</td><td>3</td><td>61</td><td>84</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student38</td><td>Languages</td><td>female</td><td>63</td><td>39</td><td>0</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student39</td><td>Mathematics</td><td>male</td><td>50</td><td>46</td><td>32</td><td>38</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student40</td><td>Languages</td><td>female</td><td>51</td><td>75</td><td>25</td><td>3</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student41</td><td>Mathematics</td><td>male</td><td>43</td><td>34</td><td>28</td><td>78</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student42</td><td>Languages</td><td>female</td><td>11</td><td>89</td><td>60</td><td>95</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student43</td><td>Mathematics</td><td>male</td><td>48</td><td>92</td><td>18</td><td>88</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student44</td><td>Languages</td><td>female</td><td>82</td><td>2</td><td>59</td><td>73</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student45</td><td>Mathematics</td><td>male</td><td>91</td><td>73</td><td>37</td><td>39</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student46</td><td>Languages</td><td>female</td><td>4</td><td>8</td><td>12</td><td>10</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student47</td><td>Mathematics</td><td>male</td><td>89</td><td>10</td><td>6</td><td>11</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student48</td><td>Languages</td><td>female</td><td>90</td><td>32</td><td>21</td><td>18</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student49</td><td>Mathematics</td><td>male</td><td>42</td><td>49</td><td>49</td><td>72</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
<tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button class="remove" title="Remove this row">X</button></td></tr> <tr><td>Student50</td><td>Languages</td><td>female</td><td>56</td><td>37</td><td>67</td><td>54</td><td><button type="button" class="remove" title="Remove this row">X</button></td></tr>
</tbody> </tbody>
</table> </table>

View File

@ -47,7 +47,7 @@
<div id="main"> <div id="main">
<h1>Demo</h1> <h1>Demo</h1>
<button class="toggleparsedvalue">toggle</button> parsed values within the column <button type="button" class="toggleparsedvalue">toggle</button> parsed values within the column
<div id="demo"> <div id="demo">
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>

View File

@ -60,7 +60,7 @@
</p> </p>
<h1>Demo</h1> <h1>Demo</h1>
<button class="toggleparsedvalue">Toggle parsed values</button> <button type="button" class="toggleparsedvalue">Toggle parsed values</button>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>
<tr><th class="sorter-metric" data-metric-name="b|byte">Metric (binary) Size</th> <tr><th class="sorter-metric" data-metric-name="b|byte">Metric (binary) Size</th>

View File

@ -100,6 +100,7 @@
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);
return false;
}); });
// toggle zebra widget // toggle zebra widget
@ -120,6 +121,7 @@
.find('span') .find('span')
.text(t ? 'disabled' : 'enabled'); .text(t ? 'disabled' : 'enabled');
$('table').trigger('refreshWidgets', [false]); $('table').trigger('refreshWidgets', [false]);
return false;
}); });
}); });
</script> </script>
@ -157,8 +159,8 @@
<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 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>To better understand this issue, disable the zebra widget (using the toggle button). Now <button type="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 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>Try other filter searches with the zebra widget disabled, like <button type="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 <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>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>
@ -170,9 +172,9 @@
<h1>Demo</h1> <h1>Demo</h1>
<!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters --> <!-- use the filter_reset : '.reset' option or include data-filter="" using the filter button demo code to reset the filters -->
<div class="bootstrap_buttons"> <div class="bootstrap_buttons">
Reset filter : <button class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh"></i> Reset filters</button> Reset filter : <button type="button" class="reset btn btn-primary" data-column="0" data-filter=""><i class="icon-white icon-refresh"></i> Reset filters</button>
<br> <br>
Zebra widget : <button class="zebra btn btn-success"><i class="icon-white icon-ok"></i> <span>enabled</span></button> Zebra widget : <button type="button" class="zebra btn btn-success"><i class="icon-white icon-ok"></i> <span>enabled</span></button>
</div> </div>
<br> <br>
@ -198,11 +200,11 @@
<th>Geometry</th></tr> <th>Geometry</th></tr>
<tr> <tr>
<th colspan="7" class="pager form-horizontal"> <th colspan="7" class="pager form-horizontal">
<button class="btn first"><i class="icon-step-backward"></i></button> <button type="button" class="btn first"><i class="icon-step-backward"></i></button>
<button class="btn prev"><i class="icon-arrow-left"></i></button> <button type="button" class="btn prev"><i class="icon-arrow-left"></i></button>
<span class="pagedisplay"></span> <!-- this can be any element, including an input --> <span class="pagedisplay"></span> <!-- this can be any element, including an input -->
<button class="btn next"><i class="icon-arrow-right"></i></button> <button type="button" class="btn next"><i class="icon-arrow-right"></i></button>
<button class="btn last"><i class="icon-step-forward"></i></button> <button type="button" class="btn last"><i class="icon-step-forward"></i></button>
<select class="pagesize input-mini" title="Select page size"> <select class="pagesize input-mini" title="Select page size">
<option selected="selected" value="10">10</option> <option selected="selected" value="10">10</option>
<option value="20">20</option> <option value="20">20</option>

View File

@ -30,7 +30,7 @@
// External search // External search
// buttons set up like this: // buttons set up like this:
// <button class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button> // <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button.match').click(function(){ $('button.match').click(function(){
// toggle "filter-match" class on first column // toggle "filter-match" class on first column
@ -46,6 +46,7 @@
filters.val(''); // clear all filters filters.val(''); // clear all filters
filters.eq(col).val(txt).trigger('search', false); filters.eq(col).val(txt).trigger('search', false);
return false;
}); });
}); });
@ -271,8 +272,8 @@
</div> </div>
<h1>Demo</h1> <h1>Demo</h1>
<button class="match" data-filter-column="0" data-filter-text="Denni">Match</button> <span id="mode">false</span> (toggle &quot;filter-match&quot; class on First Name column)<br> <button type="button" class="match" data-filter-column="0" data-filter-text="Denni">Match</button> <span id="mode">false</span> (toggle &quot;filter-match&quot; class on First Name column)<br>
<button class="reset">Reset Search</button> <button type="button" class="reset">Reset Search</button>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>

View File

@ -53,16 +53,29 @@
valueToHeader: false valueToHeader: false
}); });
}, },
2 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
// add any of the jQuery UI Slider options here
value: 1,
min: 1,
max: 65,
delayed: false,
valueToHeader: false,
exactMatch: false,
allText: 'all', // need to show "1" as the minimum value (instead of "all")
compare : '>='
});
},
3 : function($cell, indx){ 3 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, { return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 70], values: [1, 160],
min: 1, min: 1,
max: 70, max: 160,
delayed: true, delayed: false,
valueToHeader: false valueToHeader: false
}); });
}, },
5 : function($cell, indx){ 4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, { return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
min : 0, min : 0,
max : 45, max : 45,
@ -81,18 +94,7 @@
changeMonth: true, changeMonth: true,
changeYear : true changeYear : true
}); });
},
4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 160],
min: 1,
max: 160,
delayed: true,
valueToHeader: false
});
} }
} }
} }
}); });
@ -123,7 +125,7 @@
</ul> </ul>
</div> </div>
<h3><a href="#"><strong>jQuery UI Single Slider</strong> ("Rank" column)</a></h3> <h3><a href="#"><strong>jQuery UI Single Slider</strong> ("Rank" and "Age" columns)</a></h3>
<div> <div>
<ul> <ul>
<li>This example shows how you can add a jQuery UI slider to filter column content.</li> <li>This example shows how you can add a jQuery UI slider to filter column content.</li>
@ -142,6 +144,7 @@
filter_reset : 'button.reset', filter_reset : 'button.reset',
// add custom selector elements to the filter row // add custom selector elements to the filter row
filter_formatter : { filter_formatter : {
0 : function($cell, indx){ 0 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, { return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
// add any of the jQuery UI Slider options here // add any of the jQuery UI Slider options here
@ -153,7 +156,22 @@
exactMatch: true, // exact (true) or match (false) exactMatch: true, // exact (true) or match (false)
allText: 'all', // text shown when the slider is at the minimum value allText: 'all', // text shown when the slider is at the minimum value
}); });
},
2 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSlider( $cell, indx, {
// add any of the jQuery UI Slider options here
value: 0, // starting value
min: 0, // minimum value
max: 100, // maximum value
delayed: true, // delay search (set by filter_searchDelay)
valueToHeader: false, // add current slider value to the header cell
exactMatch: false, // exact (true) or match (false)
allText: 'all', // text shown when the slider is at the minimum value
compare : '>=' // show values >= selected value
});
} }
} }
} }
}); });
@ -163,10 +181,11 @@
<li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li> <li>Another option named <code>exactMatch</code> was added to allow exact or general matching of column content.</li>
<li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li> <li>Notice that the left-most value, zero in this case, will clear the column filter to allow a method to show all column content. You can modify the "all" text using the <code>allText</code> option.</li>
<li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li> <li>A search delay was added in v2.7.11 (time set by <code>filter_searchDelay</code> option). It can be disabled by setting the <code>delayed</code> option to <code>false</code>.</li>
<li>In <span class="version">v2.10.1</span> the <code>compare</code> option was added. This allows comparing the slider's value to the column value. The slider in the Age column is selecting values greater than or equal to itself.</li>
</ul> </ul>
</div> </div>
<h3><a href="#"><strong>jQuery UI Range Slider</strong> ("Age" and "Total" columns)</a></h3> <h3><a href="#"><strong>jQuery UI Range Slider</strong> ("Total" column)</a></h3>
<div> <div>
<ul> <ul>
<li>This example shows how you can add a jQuery UI range slider to filter column content.</li> <li>This example shows how you can add a jQuery UI range slider to filter column content.</li>
@ -187,27 +206,15 @@
// add custom selector elements to the filter row // add custom selector elements to the filter row
filter_formatter : { filter_formatter : {
// Age column // Total column
3 : function($cell, indx){ 3 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, { return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 70], // starting range values: [1, 160], // starting range
min: 1, // minimum value min: 1, // minimum value
max: 70, // maximum value max: 160, // maximum value
delayed: true, // delay search (set by filter_searchDelay) delayed: true, // delay search (set by filter_searchDelay)
exactMatch: true, // exact (true) or match (false) exactMatch: true, // exact (true) or match (false)
valueToHeader: false // add current slider value to the header cell valueToHeader: false, // add current slider value to the header cell
});
},
// Total column
4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiRange( $cell, indx, {
values: [1, 160], // starting range
min: 1, // minimum value
max: 160, // maximum value
delayed: true, // delay search (set by filter_searchDelay)
exactMatch: true, // exact (true) or match (false)
valueToHeader: false // add current slider value to the header cell
}); });
} }
@ -240,7 +247,7 @@
filter_reset : 'button.reset', filter_reset : 'button.reset',
// add custom selector elements to the filter row // add custom selector elements to the filter row
filter_formatter : { filter_formatter : {
5 : function($cell, indx){ 4 : function($cell, indx){
return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, { return $.tablesorter.filterFormatter.uiSpinner( $cell, indx, {
min : 0, min : 0,
max : 45, max : 45,
@ -341,137 +348,33 @@
</div> </div>
<h1>Demo</h1> <h1>Demo</h1>
<button class="reset">Reset Search</button> <button type="button" class="reset">Reset Search</button>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>
<tr> <tr>
<th>Rank</th> <th>Rank</th>
<th>Color</th>
<th>Name</th> <th>Name</th>
<th>Age</th> <th>Age</th>
<th>Total</th> <th>Total</th>
<th>Discount</th> <th>Discount</th>
<th>Date</th> <th>Date 1</th>
<th>Date 2</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr><td>1</td><td>Johnson</td><td>25</td><td>$5.95</td><td>22%</td><td>Jun 26, 2013 7:22 AM</td><td>Jun 26, 2013 7:22 AM</td></tr>
<td>1</td> <tr><td>11</td><td>Hibert</td><td>12</td><td>$82.99</td><td>5%</td><td>Aug 21, 2013 12:21 PM</td><td>Aug 21, 2013 12:21 PM</td></tr>
<td>#ff0000</td> <tr><td>12</td><td>Henry</td><td>51</td><td>$99.29</td><td>18%</td><td>Oct 13, 2013 1:15 PM</td><td>Oct 13, 2013 1:15 PM</td></tr>
<td>Johnson</td> <tr><td>51</td><td>Parker</td><td>28</td><td>$9.99</td><td>20%</td><td>Jul 6, 2013 8:14 AM</td><td>Jul 6, 2013 8:14 AM</td></tr>
<td>25</td> <tr><td>21</td><td>Hood</td><td>33</td><td>$19.99</td><td>25%</td><td>Dec 10, 2012 5:14 AM</td><td>Dec 10, 2012 5:14 AM</td></tr>
<td>$5.95</td> <tr><td>013</td><td>Kent</td><td>18</td><td>$65.89</td><td>45%</td><td>Jan 12, 2013 11:14 AM</td><td>Jan 12, 2013 11:14 AM</td></tr>
<td>22%</td> <tr><td>005</td><td>Bruce</td><td>45</td><td>$153.19</td><td>45%</td><td>Jan 18, 2014 9:12 AM</td><td>Jan 18, 2014 9:12 AM</td></tr>
<td>Jun 26, 2013 7:22 AM</td> <tr><td>10</td><td>Alex</td><td>3</td><td>$5.29</td><td>4%</td><td>Jan 8, 2013 5:11 PM</td><td>Jan 8, 2013 5:11 PM</td></tr>
</tr> <tr><td>16</td><td>Franco</td><td>24</td><td>$14.19</td><td>14%</td><td>Jan 14, 2014 11:23 AM</td><td>Jan 14, 2014 11:23 AM</td></tr>
<tr> <tr><td>66</td><td>Evans</td><td>22</td><td>$13.19</td><td>11%</td><td>Jan 18, 2013 9:12 AM</td><td>Jan 18, 2013 9:12 AM</td></tr>
<td>11</td> <tr><td>100</td><td>Brenda</td><td>18</td><td>$55.20</td><td>15%</td><td>Feb 12, 2013 7:23 PM</td><td>Feb 12, 2013 7:23 PM</td></tr>
<td>#00ff00</td> <tr><td>55</td><td>Bronson</td><td>65</td><td>$123.00</td><td>32%</td><td>Jan 20, 2014 1:12 PM</td><td>Jan 20, 2014 1:12 PM</td></tr>
<td>Hibert</td> <tr><td>9</td><td>Martha</td><td>25</td><td>$22.09</td><td>17%</td><td>Jun 11, 2013 10:55 AM</td><td>Jun 11, 2013 10:55 AM</td></tr>
<td>12</td>
<td>$2.99</td>
<td>5%</td>
<td>Aug 21, 2013 12:21 PM</td>
</tr>
<tr>
<td>12</td>
<td>#0000ff</td>
<td>Henry</td>
<td>51</td>
<td>$42.29</td>
<td>18%</td>
<td>Oct 13, 2013 1:15 PM</td>
</tr>
<tr>
<td>51</td>
<td>#00ffff</td>
<td>Parker</td>
<td>28</td>
<td>$9.99</td>
<td>20%</td>
<td>Jul 6, 2013 8:14 AM</td>
</tr>
<tr>
<td>21</td>
<td>#ffff00</td>
<td>Hood</td>
<td>33</td>
<td>$19.99</td>
<td>25%</td>
<td>Dec 10, 2012 5:14 AM</td>
</tr>
<tr>
<td>013</td>
<td>#ff0000</td>
<td>Kent</td>
<td>18</td>
<td>$15.89</td>
<td>45%</td>
<td>Jan 12, 2013 11:14 AM</td>
</tr>
<tr>
<td>005</td>
<td>#00ff00</td>
<td>Bruce</td>
<td>45</td>
<td>$153.19</td>
<td>45%</td>
<td>Jan 18, 2014 9:12 AM</td>
</tr>
<tr>
<td>10</td>
<td>#00ffff</td>
<td>Alex</td>
<td>3</td>
<td>$5.29</td>
<td>4%</td>
<td>Jan 8, 2013 5:11 PM</td>
</tr>
<tr>
<td>16</td>
<td>#ffff00</td>
<td>Franco</td>
<td>24</td>
<td>$14.19</td>
<td>14%</td>
<td>Jan 14, 2014 11:23 AM</td>
</tr>
<tr>
<td>66</td>
<td>#000000</td>
<td>Evans</td>
<td>22</td>
<td>$13.19</td>
<td>11%</td>
<td>Jan 18, 2013 9:12 AM</td>
</tr>
<tr>
<td>100</td>
<td>#ffffff</td>
<td>Brenda</td>
<td>18</td>
<td>$55.20</td>
<td>15%</td>
<td>Feb 12, 2013 7:23 PM</td>
</tr>
<tr>
<td>55</td>
<td>#ffff00</td>
<td>Bronson</td>
<td>65</td>
<td>$123.00</td>
<td>32%</td>
<td>Jan 20, 2014 1:12 PM</td>
</tr>
<tr>
<td>9</td>
<td>#000000</td>
<td>Martha</td>
<td>25</td>
<td>$22.09</td>
<td>17%</td>
<td>Jun 11, 2013 10:55 AM</td>
</tr>
</tbody> </tbody>
</table></div> </table></div>

View File

@ -222,7 +222,7 @@
</div> </div>
<h1>Demo</h1> <h1>Demo</h1>
<button class="reset">Reset Search</button> <button type="button" class="reset">Reset Search</button>
<div id="demo"><table class="tablesorter"> <div id="demo"><table class="tablesorter">
<thead> <thead>
<tr> <tr>

View File

@ -104,7 +104,7 @@
// External search // External search
// buttons set up like this: // buttons set up like this:
// <button class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button> // <button type="button" class="search" data-filter-column="4" data-filter-text="2?%">Saved Search</button>
$('button.search').click(function(){ $('button.search').click(function(){
/*** first method *** data-filter-column="1" data-filter-text="!son" /*** first method *** data-filter-column="1" data-filter-text="!son"
add search value to Discount column (zero based index) input */ add search value to Discount column (zero based index) input */
@ -131,6 +131,7 @@
$('table').trigger('search', [ columns ]); $('table').trigger('search', [ columns ]);
*/ */
return false;
}); });
});</script> });</script>
@ -153,6 +154,7 @@ $(function(){
} }
// update search after option change; add false to trigger to skip search delay // update search after option change; add false to trigger to skip search delay
$('table.tablesorter').trigger('search', false); $('table.tablesorter').trigger('search', false);
return false;
}); });
}); });
@ -290,13 +292,13 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true );</pr
</div> </div>
<h1>Demo</h1> <h1>Demo</h1>
<button class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br> <button type="button" class="toggle fsw">Toggle</button> filter_startsWith : <span id="start">false</span> (if true, search from beginning of cell content only)<br>
<button class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive) <button type="button" class="toggle fic">Toggle</button> filter_ignoreCase : <span id="case">true</span> (if false, the search will be case sensitive)
<hr> <hr>
<div id="demo"> <div id="demo">
<button class="search" data-filter-column="5" data-filter-text="2?%">Saved Search</button> (search the Discount column for &quot;2?%&quot;)<br> <button type="button" class="search" data-filter-column="5" data-filter-text="2?%">Saved Search</button> (search the Discount column for &quot;2?%&quot;)<br>
<button class="reset">Reset Search</button> <!-- targetted by the "filter_reset" option --> <button type="button" class="reset">Reset Search</button> <!-- targetted by the "filter_reset" option -->
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>

View File

@ -33,6 +33,7 @@
$('table') $('table')
.trigger('saveSortReset') // clear saved sort .trigger('saveSortReset') // clear saved sort
.trigger("sortReset"); // reset current table sort .trigger("sortReset"); // reset current table sort
return false;
}); });
});</script> });</script>
@ -58,7 +59,7 @@
</p> </p>
<h1>Demo</h1> <h1>Demo</h1>
<div id="demo"><button>Reset Sort</button> <div id="demo"><button type="button">Reset Sort</button>
<br> <br>
<table class="tablesorter"> <table class="tablesorter">
<thead> <thead>

View File

@ -79,6 +79,7 @@ $(function() {
this.config.widgetOptions.scroller_jumpToHeader = b; this.config.widgetOptions.scroller_jumpToHeader = b;
$c.html(b + ''); $c.html(b + '');
}); });
return false;
}); });
}); });
@ -123,7 +124,7 @@ $(function() {
<option value="jui">Jquery UI</option> <option value="jui">Jquery UI</option>
</select><br> </select><br>
<br> <br>
<button>Toggle</button> scroller_jumpToHeader : <span id="case">true</span> (see the note above)<span class="remark">*</span> <button type="button">Toggle</button> scroller_jumpToHeader : <span id="case">true</span> (see the note above)<span class="remark">*</span>
<br> <br>
<table class="tablesorter"> <table class="tablesorter">

View File

@ -300,7 +300,7 @@
<li>Filter Widget: <li>Filter Widget:
<ul> <ul>
<li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.10</span>)</li> <li><a href="example-widget-filter.html">basic</a> (v2.0.18; <span class="version updated">v2.10</span>)</li>
<li><a href="example-widget-filter-custom.html">custom</a> (v2.3.6)</li> <li><a href="example-widget-filter-custom.html">custom</a> (v2.3.6; <span class="version updated">v2.10.1</span>)</li>
<li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="">HTML5 Elements</a>) (v2.7.7).</li> <li>formatter (<a href="example-widget-filter-formatter-1.html">jQuery UI widgets</a> and <a href="">HTML5 Elements</a>) (v2.7.7).</li>
</ul> </ul>
</li> </li>
@ -1847,7 +1847,9 @@ $(function(){
Filter widget: If a header contains a select dropdown and this class name, only the available (visible) options in the column will show (<span class="version">v2.10.1</span>). Filter widget: If a header contains a select dropdown and this class name, only the available (visible) options in the column will show (<span class="version">v2.10.1</span>).
<div class="collapsible"> <div class="collapsible">
<br> <br>
This option is useful after one or more columns have been filtered, then the column select filter with this class applied will only show the contents of the column within the dropdown that are currently visible. See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo &quot;Discount&quot; column for an example (sort the &quot;First Name&quot; column first). This option is useful after one or more columns have been filtered, then the column select filter with this class applied will only show the contents of the column within the dropdown that are currently visible. See the <a href="example-widget-filter-custom.html">custom filter widget</a> demo &quot;Discount&quot; column for an example (sort the &quot;First Name&quot; column first).<br>
<br>
<span class="alert">Caution:</span> The main issue with this functionality is with keyboard accessibility. If the keyboard is used to select an option, only the first and default options will be available for chosing. The only way to select other options is with the mouse.
</div> </div>
</td> </td>
<td><a href="example-widget-filter-custom.html">Example</a></td> <td><a href="example-widget-filter-custom.html">Example</a></td>
@ -2923,6 +2925,7 @@ $("table")
// 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;
}); });
});</pre></div> });</pre></div>
@ -3040,6 +3043,7 @@ $.tablesorter.setFilters( $('table'), [ '', '', '', '', '', '2?%' ], true ); //
// this is the same code that the <code>filter_reset</code> element runs to clear out the filters. // this is the same code that the <code>filter_reset</code> element runs to clear out the filters.
$('button').click(function(){ $('button').click(function(){
$('table').trigger('filterReset'); $('table').trigger('filterReset');
return false;
});</pre></div> });</pre></div>
</td> </td>
<td><a href="example-widget-filter.html">Example</a></td> <td><a href="example-widget-filter.html">Example</a></td>
@ -3078,6 +3082,7 @@ $.tablesorter.addHeaderResizeEvent( table, true );</pre></div>
<pre class="prettyprint lang-javascript">$(function(){ <pre class="prettyprint lang-javascript">$(function(){
$('button').click(function(){ $('button').click(function(){
$('table').trigger('saveSortReset'); $('table').trigger('saveSortReset');
return false;
}); });
});</pre></div> });</pre></div>
</td> </td>

View File

@ -127,6 +127,7 @@ var addParsedValues = function($t, cols, format){
$('.toggleparsedvalue').on('click', function(){ $('.toggleparsedvalue').on('click', function(){
$('.val').toggleClass('hidden'); $('.val').toggleClass('hidden');
return false;
}); });
}; };