mirror of
https://github.com/Mottie/tablesorter.git
synced 2024-11-15 23:54:22 +00:00
Pager-custom-controls: keyboard use changes
* A pager element must now be focused before keyboard keys work. * Keyboard keys now include left, right, up, down, pageUp, pageDown, home, or end. * `pageKeyStep` option added. Number of pages to skip with pageUp or pageDown.
This commit is contained in:
parent
d18d2834ed
commit
6c661919c2
@ -63,9 +63,10 @@
|
||||
aroundCurrent : 1, // number of pages surrounding the current page
|
||||
link : '<a href="#">{page}</a>', // page element; use {page} to include the page number
|
||||
currentClass : 'current', // current page class name
|
||||
adjacentSpacer : ' | ', // spacer for page numbers next to each other
|
||||
distanceSpacer : ' \u2026 ', // spacer for page numbers away from each other (ellipsis &hellip;)
|
||||
addKeyboard : true // add left/right keyboard arrows to change current page
|
||||
adjacentSpacer : '<span> | </span>', // spacer for page numbers next to each other
|
||||
distanceSpacer : '<span> … <span>', // spacer for page numbers away from each other (ellipsis = &#133;)
|
||||
addKeyboard : true, // use left,right,up,down,pageUp,pageDown,home, or end to change current page
|
||||
pageKeyStep : 10 // page step to use for pageUp and pageDown
|
||||
});
|
||||
|
||||
// initialize tablesorter & pager
|
||||
@ -97,6 +98,20 @@
|
||||
<p class="tip">
|
||||
<em>NOTE!</em>
|
||||
<ul>
|
||||
<li>Modified in <span class="version">v2.27.6</span>
|
||||
<ul>
|
||||
<li>Fixed issues with page less than one being shown.</li>
|
||||
<li>The <code>ends</code> and <code>aroundCurrent</code> works properly when values are set to zero.</li>
|
||||
<li>Modified <code>adjacentSpacer</code> and <code>distanceSpacer</code> to include surrounding span element.</li>
|
||||
<li>Using the keyboard has changed!
|
||||
<ul>
|
||||
<li><span class="label warning">NOTE</span> The keyboard keys will only work IF a pager element has focus.</li>
|
||||
<li>The <code>addKeyboard</code> function now includes <kbd>left</kbd>, <kbd>right</kbd>, <kbd>up</kbd>, <kbd>down</kbd>, <kbd>pageUp</kbd>, <kbd>pageDown</kbd>, <kbd>Home</kbd> and <kbd>End</kbd>.</li>
|
||||
<li>A new <code>pageKeyStep</code> option was added to allow setting the number of pages to skip on <kbd>pageUp</kbd> or <kbd>pageDown</kbd>.</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>Modified in <span class="version">v2.17.1</span> to properly work with either the pager addon or pager widget.</li>
|
||||
<li>In <span class="version">v2.16.4</span>, code was updated to correctly count process pages.</li>
|
||||
</ul>
|
||||
|
@ -29,7 +29,8 @@ $.tablesorter.customPagerControls = function(settings) {
|
||||
currentClass : 'current', // current page class name
|
||||
adjacentSpacer : '<span> | </span>', // spacer for page numbers next to each other
|
||||
distanceSpacer : '<span> … <span>', // spacer for page numbers away from each other (ellipsis)
|
||||
addKeyboard : true // add left/right keyboard arrows to change current page
|
||||
addKeyboard : true, // use left,right,up,down,pageUp,pageDown,home, or end to change current page
|
||||
pageKeyStep : 10 // page step to use for pageUp and pageDown
|
||||
},
|
||||
options = $.extend({}, defaults, settings),
|
||||
$table = $(options.table),
|
||||
@ -84,7 +85,9 @@ $.tablesorter.customPagerControls = function(settings) {
|
||||
}
|
||||
$pager
|
||||
.find('.pagecount')
|
||||
.html(pages.html());
|
||||
.html(pages.html())
|
||||
.find('.' + options.currentClass)
|
||||
.focus();
|
||||
});
|
||||
|
||||
// set up pager controls
|
||||
@ -113,23 +116,26 @@ $.tablesorter.customPagerControls = function(settings) {
|
||||
if (options.addKeyboard) {
|
||||
$(document).on('keydown', function(events) {
|
||||
// ignore arrows inside form elements
|
||||
if (/input|select|textarea/i.test(events.target.nodeName)) {
|
||||
if (/input|select|textarea/i.test(events.target.nodeName) ||
|
||||
!(events.which > 32 && events.which < 41)) {
|
||||
return;
|
||||
}
|
||||
if (events.which === 37) {
|
||||
// left
|
||||
$pager
|
||||
.find(options.currentPage)
|
||||
.filter('.' + options.currentClass)
|
||||
.prevAll(':not(span):first')
|
||||
.click();
|
||||
} else if (events.which === 39) {
|
||||
// right
|
||||
$pager
|
||||
.find(options.currentPage)
|
||||
.filter('.' + options.currentClass)
|
||||
.nextAll(':not(span):first')
|
||||
.click();
|
||||
// only allow keyboard use if element inside of pager is focused
|
||||
if ($(document.activeElement).closest(options.pager).is($pager)) {
|
||||
events.preventDefault();
|
||||
var key = events.which,
|
||||
max = $table[0].config.totalRows,
|
||||
$el = $pager.find(options.currentPage).filter('.' + options.currentClass),
|
||||
page = $el.length ? parseInt($el.attr('data-page'), 10) : null;
|
||||
if (page) {
|
||||
if (key === 33) { page -= options.pageKeyStep; } // pageUp
|
||||
if (key === 34) { page += options.pageKeyStep; } // pageDown
|
||||
if (key === 35) { page = max; } // end
|
||||
if (key === 36) { page = 1; } // home
|
||||
if (key === 37 || key === 38) { page -= 1; } // left/up
|
||||
if (key === 39 || key === 40) { page += 1; } // right/down
|
||||
$table.trigger('pageSet', page);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -5,13 +5,14 @@
|
||||
var $t, t, v, animating, clicked,
|
||||
|
||||
cleanupCode = function(code){
|
||||
return code.replace(/[<>\"\'\t\n]/g, function(m) { return {
|
||||
return code.replace(/([<>\"\'\t\n]|…)/g, function(m) { return {
|
||||
'<' : '<',
|
||||
'>' : '>',
|
||||
"'" : ''',
|
||||
'"' : '"',
|
||||
'\t': ' ',
|
||||
'\n': '<br/>' // needed for IE
|
||||
'\n': '<br/>', // needed for IE
|
||||
'…' : '&#133;' // pager custom controls ellipsis
|
||||
}[m];});
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user