library-mirrors/tablesorter
1
0
Fork 0
mirror of https://github.com/Mottie/tablesorter.git synced 2024-11-15 23:54:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity
5d0624ccb2
tablesorter/docs/example-pager.html

528 lines
18 KiB
HTML
Raw Normal View History

Added missing docs!
2011-07-17 15:01:18 +00:00
<!DOCTYPE html>
<html>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<head>
Added missing docs!
2011-07-17 15:01:18 +00:00
<meta charset="utf-8">
alphanumeric sort
2011-06-22 23:19:27 +00:00
<title>jQuery plugin: Tablesorter 2.0 - Pager plugin</title>
<!-- jQuery -->
Added missing docs!
2011-07-17 15:01:18 +00:00
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<!-- Demo stuff -->
Added missing docs!
2011-07-17 15:01:18 +00:00
<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>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<!-- Tablesorter: required -->
Added missing docs!
2011-07-17 15:01:18 +00:00
<link rel="stylesheet" href="../css/blue/style.css">
<script src="../js/jquery.tablesorter.js"></script>
alphanumeric sort
2011-06-22 23:19:27 +00:00
<!-- Tablesorter: optional -->
ui theme & pager update
2011-07-27 06:14:20 +00:00
<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>
alphanumeric sort
2011-06-22 23:19:27 +00:00
Added missing docs!
2011-07-17 15:01:18 +00:00
<script id="js">$(function(){
alphanumeric sort
2011-06-22 23:19:27 +00:00
disable/enable pager
2011-10-14 01:57:46 +00:00
// **********************************
// Description of ALL pager options
// **********************************
filter widget
2011-09-13 22:55:31 +00:00
var pagerOptions = {
disable/enable pager
2011-10-14 01:57:46 +00:00
// target the pager markup - see the HTML block below
filter widget
2011-09-13 22:55:31 +00:00
container: $("#pager"),
disable/enable pager
2011-10-14 01:57:46 +00:00
// output string - default is '{page}/{totalPages}'; possible variables: {page}, {totalPages}, {startRow}, {endRow} and {totalRows}
filter widget
2011-09-13 22:55:31 +00:00
output: '{startRow} to {endRow} ({totalRows})',
disable/enable pager
2011-10-14 01:57:46 +00:00
// apply disabled classname to the pager arrows when the rows at either extreme is visible - default is true
filter widget
2011-09-13 22:55:31 +00:00
updateArrows: true,
disable/enable pager
2011-10-14 01:57:46 +00:00
// 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
filter widget
2011-09-13 22:55:31 +00:00
};
disable/enable pager
2011-10-14 01:57:46 +00:00
// Initialize tablesorter
// ***********************
alphanumeric sort
2011-06-22 23:19:27 +00:00
$("table")
.tablesorter({
widthFixed: true,
widgets: ['zebra']
})
Added missing docs!
2011-07-17 15:01:18 +00:00
// initialize the pager plugin
disable/enable pager
2011-10-14 01:57:46 +00:00
// ****************************
filter widget
2011-09-13 22:55:31 +00:00
.tablesorterPager(pagerOptions)
Added missing docs!
2011-07-17 15:01:18 +00:00
// bind to pager events
disable/enable pager
2011-10-14 01:57:46 +00:00
// *********************
Added missing docs!
2011-07-17 15:01:18 +00:00
.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();
alphanumeric sort
2011-06-22 23:19:27 +00:00
});
Added missing docs!
2011-07-17 15:01:18 +00:00
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
// Add two new rows using the "addRows" method
disable/enable pager
2011-10-14 01:57:46 +00:00
// the "update" method doesn't work here because not all rows are
// present in the table when the pager is applied ("removeRows" is false)
// ***********************************************************************
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
$('button:contains(Add)').click(function(){
// add two rows
disable/enable pager
2011-10-14 01:57:46 +00:00
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>',
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
$row = $(row);
$('table')
.find('tbody').append($row)
.trigger('addRows', [$row]);
});
disable/enable pager
2011-10-14 01:57:46 +00:00
// 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');
});
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
// Destroy pager
disable/enable pager
2011-10-14 01:57:46 +00:00
// **************
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
$('button:contains(Destroy)').click(function(){
disable/enable pager
2011-10-14 01:57:46 +00:00
// Exterminate, annhilate, destroy! http://www.youtube.com/watch?v=LOqn8FxuyFs
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
$('table').trigger('destroy.pager');
filter widget
2011-09-13 22:55:31 +00:00
// fancy disable/enable buttons - not really needed
$('button:contains(Restore)').removeAttr('disabled');
$(this).attr('disabled', true);
});
// Restore pager
disable/enable pager
2011-10-14 01:57:46 +00:00
// **************
filter widget
2011-09-13 22:55:31 +00:00
$('button:contains(Restore)').click(function(){
disable/enable pager
2011-10-14 01:57:46 +00:00
// initialize the pager
filter widget
2011-09-13 22:55:31 +00:00
$('table').tablesorterPager(pagerOptions);
// fancy disable/enable buttons - not really needed
$(this).attr('disabled', true);
$('button:contains(Destroy)').removeAttr('disabled');
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
});
Added missing docs!
2011-07-17 15:01:18 +00:00
});</script>
</head>
disable/enable pager
2011-10-14 01:57:46 +00:00
<body id="pager-demo">
Added missing docs!
2011-07-17 15:01:18 +00:00
<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">
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
<p class="tip">
columns widget
2011-09-11 17:51:02 +00:00
<em>NOTE!</em> The following are not part of the original plugin:
<ul>
disable/enable pager
2011-10-14 01:57:46 +00:00
<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>
columns widget
2011-09-11 17:51:02 +00:00
<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>
disable/enable pager
2011-10-14 01:57:46 +00:00
<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>
columns widget
2011-09-11 17:51:02 +00:00
</ul>
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
</p>
Added missing docs!
2011-07-17 15:01:18 +00:00
<h1>Triggered Events</h1>
<ul id="display">
<li>Pager events will appear here.</li>
<li>&nbsp;</li>
<li>&nbsp;</li>
</ul>
<h1>Demo</h1>
<br>
filter widget
2011-09-13 22:55:31 +00:00
<button>Add Rows</button> <button>Destroy Pager</button> <button disabled>Restore Pager</button>
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
<br><br>
Added missing docs!
2011-07-17 15:01:18 +00:00
<div id="pager" class="pager">
<form>
<img src="../addons/pager/icons/first.png" class="first"/>
<img src="../addons/pager/icons/prev.png" class="prev"/>
ui theme & pager update
2011-07-27 06:14:20 +00:00
<span class="pagedisplay"></span> <!-- this can be any element, including an input -->
Added missing docs!
2011-07-17 15:01:18 +00:00
<img src="../addons/pager/icons/next.png" class="next"/>
<img src="../addons/pager/icons/last.png" class="last"/>
<select class="pagesize">
ui theme & pager update
2011-07-27 06:14:20 +00:00
<option selected="selected" value="10">10</option>
Added missing docs!
2011-07-17 15:01:18 +00:00
<option value="20">20</option>
<option value="30">30</option>
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
<option value="40">40</option>
Added missing docs!
2011-07-17 15:01:18 +00:00
</select>
</form>
</div>
<table class="tablesorter">
alphanumeric sort
2011-06-22 23:19:27 +00:00
<thead>
<tr>
<th>Name</th>
<th>Major</th>
<th>Sex</th>
<th>English</th>
<th>Japanese</th>
<th>Calculus</th>
<th>Geometry</th>
disable/enable pager
2011-10-14 01:57:46 +00:00
<th class="remove sorter-false"></th>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</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>
disable/enable pager
2011-10-14 01:57:46 +00:00
<th></th>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</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>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student02</td>
<td>Mathematics</td>
<td>male</td>
<td>90</td>
<td>88</td>
<td>100</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student03</td>
<td>Languages</td>
<td>female</td>
<td>85</td>
<td>95</td>
<td>80</td>
<td>85</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student04</td>
<td>Languages</td>
<td>male</td>
<td>60</td>
<td>55</td>
<td>100</td>
<td>100</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student05</td>
<td>Languages</td>
<td>female</td>
<td>68</td>
<td>80</td>
<td>95</td>
<td>80</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student06</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student07</td>
<td>Mathematics</td>
<td>male</td>
<td>85</td>
<td>68</td>
<td>90</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student08</td>
<td>Languages</td>
<td>male</td>
<td>100</td>
<td>90</td>
<td>90</td>
<td>85</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student09</td>
<td>Mathematics</td>
<td>male</td>
<td>80</td>
<td>50</td>
<td>65</td>
<td>75</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student10</td>
<td>Languages</td>
<td>male</td>
<td>85</td>
<td>100</td>
<td>100</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student11</td>
<td>Languages</td>
<td>male</td>
<td>86</td>
<td>85</td>
<td>100</td>
<td>100</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student12</td>
<td>Mathematics</td>
<td>female</td>
<td>100</td>
<td>75</td>
<td>70</td>
<td>85</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student13</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>80</td>
<td>100</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student14</td>
<td>Languages</td>
<td>female</td>
<td>50</td>
<td>45</td>
<td>55</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student15</td>
<td>Languages</td>
<td>male</td>
<td>95</td>
<td>35</td>
<td>100</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student16</td>
<td>Languages</td>
<td>female</td>
<td>100</td>
<td>50</td>
<td>30</td>
<td>70</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student17</td>
<td>Languages</td>
<td>female</td>
<td>80</td>
<td>100</td>
<td>55</td>
<td>65</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student18</td>
<td>Mathematics</td>
<td>male</td>
<td>30</td>
<td>49</td>
<td>55</td>
<td>75</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student19</td>
<td>Languages</td>
<td>male</td>
<td>68</td>
<td>90</td>
<td>88</td>
<td>70</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student20</td>
<td>Mathematics</td>
<td>male</td>
<td>40</td>
<td>45</td>
<td>40</td>
<td>80</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student21</td>
<td>Languages</td>
<td>male</td>
<td>50</td>
<td>45</td>
<td>100</td>
<td>100</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
<tr>
<td>Student22</td>
<td>Mathematics</td>
<td>male</td>
<td>100</td>
<td>99</td>
<td>100</td>
<td>90</td>
disable/enable pager
2011-10-14 01:57:46 +00:00
<td><button class="remove" title="Remove this row">X</button></td>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</tr>
disable/enable pager
2011-10-14 01:57:46 +00:00
<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>
addRows method & destroy pager
2011-09-08 16:28:10 +00:00
</tbody>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</table>
Added missing docs!
2011-07-17 15:01:18 +00:00
<h1>Javascript</h1>
<div id="javascript">
<pre class="js"></pre>
</div>
ui theme & pager update
2011-07-27 06:14:20 +00:00
<h1>CSS</h1>
<div id="css">
<pre class="css"></pre>
</div>
Added missing docs!
2011-07-17 15:01:18 +00:00
<h1>HTML</h1>
<div id="html">
<pre class="html">&lt;table class=&quot;tablesorter&quot;&gt;
&lt;!-- view page source to see the entire table --&gt;
&lt;/table&gt;
&lt;!-- pager --&gt;
&lt;div id=&quot;pager&quot; class=&quot;pager&quot;&gt;
&lt;form&gt;
&lt;img src=&quot;first.png&quot; class=&quot;first&quot;/&gt;
&lt;img src=&quot;prev.png&quot; class=&quot;prev&quot;/&gt;
ui theme & pager update
2011-07-27 06:14:20 +00:00
&lt;span class=&quot;pagedisplay&quot;&gt;&lt;/span&gt; &lt;!-- this can be any element, including an input --&gt;
Added missing docs!
2011-07-17 15:01:18 +00:00
&lt;img src=&quot;next.png&quot; class=&quot;next&quot;/&gt;
&lt;img src=&quot;last.png&quot; class=&quot;last&quot;/&gt;
&lt;select class=&quot;pagesize&quot;&gt;
&lt;option selected=&quot;selected&quot; value=&quot;10&quot;&gt;10&lt;/option&gt;
&lt;option value=&quot;20&quot;&gt;20&lt;/option&gt;
&lt;option value=&quot;30&quot;&gt;30&lt;/option&gt;
&lt;option value=&quot;40&quot;&gt;40&lt;/option&gt;
&lt;/select&gt;
&lt;/form&gt;
&lt;/div&gt;</pre>
</div>
<div class="next-up">
<hr />
pager bug & resizable columns widget
2011-10-26 06:50:02 +00:00
Next up: <a href="example-empty-table.html">Initializing tablesorter on a empty table &rsaquo;&rsaquo;</a>
alphanumeric sort
2011-06-22 23:19:27 +00:00
</div>
</div>
</body>
</html>
Reference in New Issue Copy Permalink