DataTables

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:

"oLanguage" : {
	"sLengthMenu" : 'Display <span class = "ef_pagination_length" onclick = "oTable.fnShowLess()">Less</span> <span class = "ef_pagination_length" onclick = "oTable.fnShowMore()">More</span> records'
}

b) Implement the following methods:

$.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]);
	} 
}

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

DataTables

Howdy, Stranger!

Support

Categories

In this Discussion