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

beta pager controls update

Browse Source
This commit is contained in:
Mottie 2013-11-13 16:15:04 -06:00
parent 8e6abfb86c
commit f940f79c8d
2 changed files with 87 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
beta-testing/example-pager-custom-controls.html
View File

@ -110,26 +110,10 @@
<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>
</tr>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</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>
</tr>
<tr><th>Name</th><th>Major</th><th>Sex</th><th>English</th><th>Japanese</th><th>Calculus</th><th>Geometry</th></tr>
<tr>
<td colspan="7">
<div class="pager"> <span class="left">
@ -176,7 +160,6 @@
<tr><td>Student21</td><td>Languages</td><td>male</td><td>50</td><td>45</td><td>100</td><td>100</td></tr>
<tr><td>Student22</td><td>Mathematics</td><td>male</td><td>100</td><td>99</td><td>100</td><td>90</td></tr>
<tr><td>Student23</td><td>Languages</td><td>female</td><td>85</td><td>80</td><td>80</td><td>80</td></tr>
<tr><td>student23</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
<tr><td>student24</td><td>Languages</td><td>female</td><td>100</td><td>91</td><td>13</td><td>82</td></tr>
<tr><td>student25</td><td>Mathematics</td><td>male</td><td>22</td><td>96</td><td>82</td><td>53</td></tr>
<tr><td>student26</td><td>Languages</td><td>female</td><td>37</td><td>29</td><td>56</td><td>59</td></tr>
@ -1153,6 +1136,7 @@
<tr><td>student997</td><td>Mathematics</td><td>male</td><td>73</td><td>33</td><td>42</td><td>53</td></tr>
<tr><td>student998</td><td>Languages</td><td>female</td><td>64</td><td>10</td><td>2</td><td>31</td></tr>
<tr><td>student999</td><td>Mathematics</td><td>male</td><td>91</td><td>93</td><td>16</td><td>35</td></tr>
<tr><td>student1000</td><td>Mathematics</td><td>male</td><td>82</td><td>77</td><td>0</td><td>79</td></tr>
</tbody>
</table>
@ -1162,7 +1146,50 @@
</div>
<h1>HTML</h1>
<div>
<pre class="prettyprint lang-html"></pre>
<pre class="prettyprint lang-html">&lt;table class=&quot;tablesorter&quot;&gt;
&lt;thead&gt;
&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Major&lt;/th&gt;&lt;th&gt;Sex&lt;/th&gt;&lt;th&gt;English&lt;/th&gt;&lt;th&gt;Japanese&lt;/th&gt;&lt;th&gt;Calculus&lt;/th&gt;&lt;th&gt;Geometry&lt;/th&gt;&lt;/tr&gt;
&lt;/thead&gt;
&lt;tfoot&gt;
&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Major&lt;/th&gt;&lt;th&gt;Sex&lt;/th&gt;&lt;th&gt;English&lt;/th&gt;&lt;th&gt;Japanese&lt;/th&gt;&lt;th&gt;Calculus&lt;/th&gt;&lt;th&gt;Geometry&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;
&lt;td colspan=&quot;7&quot;&gt;
&lt;div class=&quot;pager&quot;&gt;
&lt;nav class=&quot;left&quot;&gt;
# per page:
&lt;a href=&quot;#&quot; class=&quot;current&quot;&gt;10&lt;/a&gt; |
&lt;a href=&quot;#&quot;&gt;25&lt;/a&gt; |
&lt;a href=&quot;#&quot;&gt;50&lt;/a&gt; |
&lt;a href=&quot;#&quot;&gt;100&lt;/a&gt;
&lt;/nav&gt;
&lt;nav class=&quot;right&quot;&gt;
&lt;span class=&quot;prev&quot;&gt;
&lt;img src=&quot;icons/prev.png&quot; /&gt; Prev&amp;nbsp;
&lt;/span&gt;
&lt;span class=&quot;pagecount&quot;&gt;&lt;/span&gt;
&amp;nbsp;&lt;span class=&quot;next&quot;&gt;Next
&lt;img src=&quot;icons/next.png&quot; /&gt;
&lt;/span&gt;
&lt;/nav&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tbody&gt;
&lt;tr&gt;&lt;td&gt;Student01&lt;/td&gt;&lt;td&gt;Languages&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;td&gt;70&lt;/td&gt;&lt;td&gt;75&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student02&lt;/td&gt;&lt;td&gt;Mathematics&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;td&gt;88&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student03&lt;/td&gt;&lt;td&gt;Languages&lt;/td&gt;&lt;td&gt;female&lt;/td&gt;&lt;td&gt;85&lt;/td&gt;&lt;td&gt;95&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;td&gt;85&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student04&lt;/td&gt;&lt;td&gt;Languages&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;60&lt;/td&gt;&lt;td&gt;55&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student05&lt;/td&gt;&lt;td&gt;Languages&lt;/td&gt;&lt;td&gt;female&lt;/td&gt;&lt;td&gt;68&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;td&gt;95&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student06&lt;/td&gt;&lt;td&gt;Mathematics&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;99&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student07&lt;/td&gt;&lt;td&gt;Mathematics&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;85&lt;/td&gt;&lt;td&gt;68&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student08&lt;/td&gt;&lt;td&gt;Languages&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;td&gt;85&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student09&lt;/td&gt;&lt;td&gt;Mathematics&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;80&lt;/td&gt;&lt;td&gt;50&lt;/td&gt;&lt;td&gt;65&lt;/td&gt;&lt;td&gt;75&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Student10&lt;/td&gt;&lt;td&gt;Languages&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;85&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;90&lt;/td&gt;&lt;/tr&gt;
&lt;!-- ... --&gt;
&lt;tr&gt;&lt;td&gt;student999&lt;/td&gt;&lt;td&gt;Mathematics&lt;/td&gt;&lt;td&gt;male&lt;/td&gt;&lt;td&gt;91&lt;/td&gt;&lt;td&gt;93&lt;/td&gt;&lt;td&gt;16&lt;/td&gt;&lt;td&gt;35&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;</pre>
</div>
</div>

69
beta-testing/pager-custom-controls.js
View File

@ -1,15 +1,23 @@
/*
/*!
* custom pager controls - beta testing
initialize custom pager script BEFORE initializing tablesorter/tablesorter pager
custom pager looks like this:
1 | 2 … 5 | 6 | 7 … 99 | 100
_ _ _ _ adjacentSpacer
_ _ distanceSpacer
_____ ________ ends (2 default)
_________ aroundCurrent (1 default)
*/
/*jshint browser:true, jquery:true, unused:false, loopfunc:true */
/*global jQuery: false, localStorage: false, navigator: false */
/*global jQuery: false */
;(function($){
"use strict";
$.tablesorter = $.tablesorter || {};
$.tablesorter.customPagerControls = function(options) {
$.tablesorter.customPagerControls = function(settings) {
var defaults = {
table : 'table',
pager : '.pager',
@ -23,63 +31,64 @@ $.tablesorter.customPagerControls = function(options) {
distanceSpacer : ' &#133; ', // spacer for page numbers away from each other (ellipsis)
addKeyboard : true // add left/right keyboard arrows to change current page
},
o = $.extend({}, defaults, options),
$table = $(o.table);
options = $.extend({}, defaults, settings),
$table = $(options.table);
$table
.on('pagerInitialized pagerComplete', function (e, c) {
var i, pages = $('<div/>'), t = [],
var indx, pages = $('<div/>'), pageArray = [],
cur = c.page + 1,
start = cur > 1 ? (c.totalPages - cur < o.aroundCurrent ? -(o.aroundCurrent + 1) + (c.totalPages - cur) : -o.aroundCurrent) : 0,
end = cur < o.aroundCurrent + 1 ? o.aroundCurrent + 3 - cur : o.aroundCurrent + 1;
for (i = start; i < end; i++) {
if (cur + i >= 1 && cur + i < c.totalPages) { t.push( cur + i ); }
start = cur > 1 ? (c.totalPages - cur < options.aroundCurrent ? -(options.aroundCurrent + 1) + (c.totalPages - cur) : -options.aroundCurrent) : 0,
end = cur < options.aroundCurrent + 1 ? options.aroundCurrent + 3 - cur : options.aroundCurrent + 1;
for (indx = start; indx < end; indx++) {
if (cur + indx >= 1 && cur + indx < c.totalPages) { pageArray.push( cur + indx ); }
}
// include first and last pages (ends) in the pagination
for (i = 0; i < o.ends; i++){
if ($.inArray(i + 1, t) === -1) { t.push(i + 1); }
if ($.inArray(c.totalPages - i, t) === -1) { t.push(c.totalPages - i); }
for (indx = 0; indx < options.ends; indx++){
if ($.inArray(indx + 1, pageArray) === -1) { pageArray.push(indx + 1); }
if ($.inArray(c.totalPages - indx, pageArray) === -1) { pageArray.push(c.totalPages - indx); }
}
// sort the list
t = t.sort(function(a, b){ return a - b; });
pageArray = pageArray.sort(function(a, b){ return a - b; });
// make links and spacers
$.each(t, function(j, v){
$.each(pageArray, function(indx, value){
pages
.append( $(o.link.replace(/\{page\}/g, v)).toggleClass(o.currentClass, v === cur).attr('data-page', v) )
.append( '<span>' + (j < t.length - 1 && ( t[j+1] - 1 !== v ) ? o.distanceSpacer : ( j >= t.length - 1 ? '' : o.adjacentSpacer )) + '</span>' );
.append( $(options.link.replace(/\{page\}/g, value)).toggleClass(options.currentClass, value === cur).attr('data-page', value) )
.append( '<span>' + (indx < pageArray.length - 1 && ( pageArray[ indx + 1 ] - 1 !== value ) ? options.distanceSpacer :
( indx >= pageArray.length - 1 ? '' : options.adjacentSpacer )) + '</span>' );
});
$('.pagecount').html(pages.html());
});
// set up pager controls
$(o.pager).find(o.pageSize).on('click', function () {
$(options.pager).find(options.pageSize).on('click', function () {
$(this)
.addClass(o.currentClass)
.addClass(options.currentClass)
.siblings()
.removeClass(o.currentClass);
.removeClass(options.currentClass);
$table.trigger('pageSize', $(this).html());
return false;
}).end()
.on('click', o.currentPage, function(){
.on('click', options.currentPage, function(){
$(this)
.addClass(o.currentClass)
.addClass(options.currentClass)
.siblings()
.removeClass(o.currentClass);
.removeClass(options.currentClass);
$table.trigger('pageSet', $(this).attr('data-page'));
return false;
});
// make right/left arrow keys work
if (o.addKeyboard) {
$(document).on('keydown', function(e){
if (options.addKeyboard) {
$(document).on('keydown', function(events){
// ignore arrows inside form elements
if (/input|select|textarea/i.test(e.target.tagName)) { return; }
if (e.which === 37) {
if (/input|select|textarea/i.test(events.target.tagName)) { return; }
if (events.which === 37) {
// left
$(o.pager).find(o.currentPage).filter('.' + o.currentClass).prevAll(':not(span):first').click();
} else if (e.which === 39) {
$(options.pager).find(options.currentPage).filter('.' + options.currentClass).prevAll(':not(span):first').click();
} else if (events.which === 39) {
// right
$(o.pager).find(o.currentPage).filter('.' + o.currentClass).nextAll(':not(span):first').click();
$(options.pager).find(options.currentPage).filter('.' + options.currentClass).nextAll(':not(span):first').click();
}
});
}