mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
528 lines
18 KiB
HTML
528 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
|
|
|
|
<!-- jQuery -->
|
|
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
|
|
|
|
<!-- Demo stuff -->
|
|
<link rel="stylesheet" href="css/jq.css">
|
|
<script src="js/chili/jquery.chili-2.2.js"></script>
|
|
<script src="js/chili/recipes.js"></script>
|
|
<script src="js/docs.js"></script>
|
|
|
|
<!-- Tablesorter: required -->
|
|
<link rel="stylesheet" href="../css/blue/style.css">
|
|
<script src="../js/jquery.tablesorter.js"></script>
|
|
|
|
<!-- Tablesorter: optional -->
|
|
<script src="../addons/pager/jquery.tablesorter.pager.js"></script>
|
|
|
|
<style id="css">/*** css used when "updateArrows" option is true ***/
|
|
/* the pager itself gets a disabled class when the number of rows is less than the size */
|
|
#pager.disabled {
|
|
display: none;
|
|
}
|
|
/* hide or fade out pager arrows when the first or last row is visible */
|
|
#pager img.disabled {
|
|
/* visibility: hidden */
|
|
opacity: 0.5;
|
|
filter: alpha(opacity=50);
|
|
}</style>
|
|
|
|
<script id="js">$(function(){
|
|
|
|
// **********************************
|
|
// Description of ALL pager options
|
|
// **********************************
|
|
var pagerOptions = {
|
|
|
|
// target the pager markup - see the HTML block below
|
|
container: $("#pager"),
|
|
|
|
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
|
|
output: '{startRow} to {endRow} ({totalRows})',
|
|
|
|
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
|
|
updateArrows: true,
|
|
|
|
// starting page of the pager (zero based index)
|
|
page: 0,
|
|
|
|
// Number of visible rows - default is 10
|
|
size: 10,
|
|
|
|
// if true, moves the pager below the table at a fixed position; so if only 2 rows showing, the pager remains in the same place
|
|
// default is true
|
|
positionFixed: false,
|
|
|
|
// offset added to the pager top, but only when "positionFixed" is true
|
|
offset: 0,
|
|
|
|
// remove rows from the table to speed up the sort of large tables.
|
|
// setting this to false, only hides the non-visible rows; needed if you plan to add/remove rows with the pager enabled.
|
|
removeRows: false,
|
|
|
|
// css class names of pager arrows
|
|
cssNext: '.next', // next page arrow
|
|
cssPrev: '.prev', // previous page arrow
|
|
cssFirst: '.first', // go to first page arrow
|
|
cssLast: '.last', // go to last page arrow
|
|
cssPageDisplay: '.pagedisplay', // location of where the "output" is displayed
|
|
cssPageSize: '.pagesize', // page size selector - select dropdown that sets the "size" option
|
|
|
|
// class added to arrows when at the extremes (i.e. prev/first arrows are "disabled" when on the first page)
|
|
cssDisabled: 'disabled' // Note there is no period "." in front of this class name
|
|
|
|
};
|
|
|
|
// Initialize tablesorter
|
|
// ***********************
|
|
$("table")
|
|
.tablesorter({
|
|
widthFixed: true,
|
|
widgets: ['zebra']
|
|
})
|
|
|
|
// initialize the pager plugin
|
|
// ****************************
|
|
.tablesorterPager(pagerOptions)
|
|
|
|
// bind to pager events
|
|
// *********************
|
|
.bind('pagerChange pagerComplete', function(e,c){
|
|
var msg = '" event triggered, ' + (e.type === 'pagerChange' ? 'going to' : 'now on') +
|
|
' page ' + (c.page + 1) + '/' + c.totalPages;
|
|
$('#display')
|
|
.append('<li>"' + e.type + msg + '</li>')
|
|
.find('li:first').remove();
|
|
});
|
|
|
|
// Add two new rows using the "addRows" method
|
|
// the "update" method doesn't work here because not all rows are
|
|
// present in the table when the pager is applied ("removeRows" is false)
|
|
// ***********************************************************************
|
|
$('button:contains(Add)').click(function(){
|
|
// add two rows
|
|
var row = '<tr><td>StudentXX</td><td>Mathematics</td><td>male</td><td>33</td><td>39</td><td>54</td><td>73</td><td><button class="remove" title="Remove this row">X</button></td></tr>' +
|
|
'<tr><td>StudentYY</td><td>Mathematics</td><td>female</td><td>83</td><td>89</td><td>84</td><td>83</td><td><button class="remove" title="Remove this row">X</button></td></tr>',
|
|
$row = $(row);
|
|
$('table')
|
|
.find('tbody').append($row)
|
|
.trigger('addRows', [$row]);
|
|
});
|
|
|
|
// Delete a row
|
|
// *************
|
|
$('table').delegate('button.remove', 'click' ,function(){
|
|
var t = $('table');
|
|
// disabling the pager will restore all table rows
|
|
t.trigger('disable.pager');
|
|
// remove chosen row
|
|
$(this).closest('tr').remove();
|
|
// restore pager
|
|
t.trigger('enable.pager');
|
|
});
|
|
|
|
// Destroy pager
|
|
// **************
|
|
$('button:contains(Destroy)').click(function(){
|
|
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
|
|
$('table').trigger('destroy.pager');
|
|
|
|
// fancy disable/enable buttons - not really needed
|
|
$('button:contains(Restore)').removeAttr('disabled');
|
|
$(this).attr('disabled', true);
|
|
|
|
});
|
|
|
|
// Restore pager
|
|
// **************
|
|
$('button:contains(Restore)').click(function(){
|
|
// initialize the pager
|
|
$('table').tablesorterPager(pagerOptions);
|
|
|
|
// fancy disable/enable buttons - not really needed
|
|
$(this).attr('disabled', true);
|
|
$('button:contains(Destroy)').removeAttr('disabled');
|
|
|
|
});
|
|
|
|
});</script>
|
|
</head>
|
|
<body id="pager-demo">
|
|
<div id="banner">
|
|
<h1>table<em>sorter</em></h1>
|
|
<h2>Pager plugin</h2>
|
|
<h3>Flexible client-side table sorting</h3>
|
|
<a href="index.html">Back to documentation</a>
|
|
</div>
|
|
|
|
<div id="main">
|
|
|
|
<p class="tip">
|
|
<em>NOTE!</em> The following are not part of the original plugin:
|
|
<ul>
|
|
<li>This pager plugin can be applied to the original tablesorter, but there is one exception - setting the `removeRows` option to false will break the sort.</li>
|
|
<li>Added "pagerChange" and "pagerComplete" events in version 2.0.7.</li>
|
|
<li>Updated pager functions, removed "separator" option, and added output string formatting (e.g. "1 to 10 (50)") to version 2.0.9.</li>
|
|
<li>Added "cssDisabled" and "pagerArrows" options which controls the look of the pager and arrows when the pager is on the first or last page. Added in version 2.0.9.</li>
|
|
<li>Added a new "addRows" method to allow adding new rows while the pager is applied to a table. Using "update" would remove all non-visible rows. New in version 2.0.16.</li>
|
|
<li>New "destroy.pager" method will reveal the entire table, remove the pager functionality, and hide the actual pager. Added in version 2.0.16.</li>
|
|
<li>Reduced the number of rows in the demo from 1022 to 50, so you don't have to scroll forever (when the pager is destroyed) to see the code below the table (v2.0.16).</li>
|
|
<li>New "disable.pager" and "enable.pager" methods added to make it easier to add or delete rows from the table. Added in version 2.0.21.2.</li>
|
|
</ul>
|
|
</p>
|
|
|
|
<h1>Triggered Events</h1>
|
|
<ul id="display">
|
|
<li>Pager events will appear here.</li>
|
|
<li> </li>
|
|
<li> </li>
|
|
</ul>
|
|
|
|
<h1>Demo</h1>
|
|
<br>
|
|
<button>Add Rows</button> <button>Destroy Pager</button> <button disabled>Restore Pager</button>
|
|
<br><br>
|
|
<div id="pager" class="pager">
|
|
<form>
|
|
<img src="../addons/pager/icons/first.png" class="first"/>
|
|
<img src="../addons/pager/icons/prev.png" class="prev"/>
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<img src="../addons/pager/icons/next.png" class="next"/>
|
|
<img src="../addons/pager/icons/last.png" class="last"/>
|
|
<select class="pagesize">
|
|
<option selected="selected" value="10">10</option>
|
|
<option value="20">20</option>
|
|
<option value="30">30</option>
|
|
<option value="40">40</option>
|
|
</select>
|
|
</form>
|
|
</div>
|
|
|
|
<table class="tablesorter">
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Major</th>
|
|
<th>Sex</th>
|
|
<th>English</th>
|
|
<th>Japanese</th>
|
|
<th>Calculus</th>
|
|
<th>Geometry</th>
|
|
<th class="remove sorter-false"></th>
|
|
</tr>
|
|
</thead>
|
|
<tfoot>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Major</th>
|
|
<th>Sex</th>
|
|
<th>English</th>
|
|
<th>Japanese</th>
|
|
<th>Calculus</th>
|
|
<th>Geometry</th>
|
|
<th></th>
|
|
</tr>
|
|
</tfoot>
|
|
<tbody>
|
|
<tr>
|
|
<td>Student01</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>80</td>
|
|
<td>70</td>
|
|
<td>75</td>
|
|
<td>80</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student02</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>90</td>
|
|
<td>88</td>
|
|
<td>100</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student03</td>
|
|
<td>Languages</td>
|
|
<td>female</td>
|
|
<td>85</td>
|
|
<td>95</td>
|
|
<td>80</td>
|
|
<td>85</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student04</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>60</td>
|
|
<td>55</td>
|
|
<td>100</td>
|
|
<td>100</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student05</td>
|
|
<td>Languages</td>
|
|
<td>female</td>
|
|
<td>68</td>
|
|
<td>80</td>
|
|
<td>95</td>
|
|
<td>80</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student06</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>100</td>
|
|
<td>99</td>
|
|
<td>100</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student07</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>85</td>
|
|
<td>68</td>
|
|
<td>90</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student08</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>100</td>
|
|
<td>90</td>
|
|
<td>90</td>
|
|
<td>85</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student09</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>80</td>
|
|
<td>50</td>
|
|
<td>65</td>
|
|
<td>75</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student10</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>85</td>
|
|
<td>100</td>
|
|
<td>100</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student11</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>86</td>
|
|
<td>85</td>
|
|
<td>100</td>
|
|
<td>100</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student12</td>
|
|
<td>Mathematics</td>
|
|
<td>female</td>
|
|
<td>100</td>
|
|
<td>75</td>
|
|
<td>70</td>
|
|
<td>85</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student13</td>
|
|
<td>Languages</td>
|
|
<td>female</td>
|
|
<td>100</td>
|
|
<td>80</td>
|
|
<td>100</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student14</td>
|
|
<td>Languages</td>
|
|
<td>female</td>
|
|
<td>50</td>
|
|
<td>45</td>
|
|
<td>55</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student15</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>95</td>
|
|
<td>35</td>
|
|
<td>100</td>
|
|
<td>90</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student16</td>
|
|
<td>Languages</td>
|
|
<td>female</td>
|
|
<td>100</td>
|
|
<td>50</td>
|
|
<td>30</td>
|
|
<td>70</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student17</td>
|
|
<td>Languages</td>
|
|
<td>female</td>
|
|
<td>80</td>
|
|
<td>100</td>
|
|
<td>55</td>
|
|
<td>65</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student18</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>30</td>
|
|
<td>49</td>
|
|
<td>55</td>
|
|
<td>75</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student19</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>68</td>
|
|
<td>90</td>
|
|
<td>88</td>
|
|
<td>70</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student20</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>40</td>
|
|
<td>45</td>
|
|
<td>40</td>
|
|
<td>80</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student21</td>
|
|
<td>Languages</td>
|
|
<td>male</td>
|
|
<td>50</td>
|
|
<td>45</td>
|
|
<td>100</td>
|
|
<td>100</td>
|
|
<td><button class="remove" title="Remove this row">X</button></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Student22</td>
|
|
<td>Mathematics</td>
|
|
<td>male</td>
|
|
<td>100</td>
|
|
<td>99</td>
|
|
<td>100</td>
|
|
<td>90</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 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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>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>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h1>Javascript</h1>
|
|
<div id="javascript">
|
|
<pre class="js"></pre>
|
|
</div>
|
|
|
|
<h1>CSS</h1>
|
|
<div id="css">
|
|
<pre class="css"></pre>
|
|
</div>
|
|
|
|
<h1>HTML</h1>
|
|
<div id="html">
|
|
<pre class="html"><table class="tablesorter">
|
|
<!-- view page source to see the entire table -->
|
|
</table>
|
|
|
|
<!-- pager -->
|
|
<div id="pager" class="pager">
|
|
<form>
|
|
<img src="first.png" class="first"/>
|
|
<img src="prev.png" class="prev"/>
|
|
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
|
|
<img src="next.png" class="next"/>
|
|
<img src="last.png" class="last"/>
|
|
<select class="pagesize">
|
|
<option selected="selected" value="10">10</option>
|
|
<option value="20">20</option>
|
|
<option value="30">30</option>
|
|
<option value="40">40</option>
|
|
</select>
|
|
</form>
|
|
</div></pre>
|
|
|
|
</div>
|
|
|
|
<div class="next-up">
|
|
<hr />
|
|
Next up: <a href="example-empty-table.html">Initializing tablesorter on a empty table ››</a>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|
|
|