replace aLengthMenu with buttons

periklis

Hello everyone,
I am trying to replace the aLengthMenu drop-down with a couple of buttons that say "More" and "Less" (which would map to, say, 10,25,50,100,all), but I couldn't find a way to do this using the API or a plugin. Is what I'm asking possible without tweaking the core?

Thanks

allan

http://datatables.net/plug-ins/api#fnLengthChange and
http://datatables.net/plug-ins/api#fnPagingInfo

are the two plug-in API methods you'll need to do this :-)

Allan

periklis

Thanks for the fast response, I'll look into them! Happy new year!

periklis

For anyone interested, this is how I implemented it:
a) Add the following initialization option:
[code]
"oLanguage" : {
"sLengthMenu" : 'Display Less More records'
}
[/code]
b) Implement the following methods:
[code]
$.fn.dataTableExt.oApi.fnShowMore = function( oSettings ) {
var idx = $.inArray(oTable.fnPagingInfo().iLength, oTable.fnSettings().aLengthMenu);
if (idx != -1 && idx < oTable.fnSettings().aLengthMenu.length-1) {
oTable.fnLengthChange(oTable.fnSettings().aLengthMenu[idx+1]);
}
}

$.fn.dataTableExt.oApi.fnShowLess = function( oSettings ) {
var idx = $.inArray(oTable.fnPagingInfo().iLength, oTable.fnSettings().aLengthMenu);
if (idx != -1 && idx != 0) {
oTable.fnLengthChange(oTable.fnSettings().aLengthMenu[idx-1]);
}
}

[/code]

By the way, there's a typo in http://datatables.net/plug-ins/api#fnPagingInfo: In the example, it calls fnInfo() instead of fnPagingInfo()

Thanks again for your help.

allan

Thanks for picking up the typo - now fixed. And also for posting your solution - very nice, and thanks for sharing it with the community :-)

Allan