how to customize the select box for pagination length?

laure

hello,
i do really not get how to customize the select box for pagination length .
you indicate in the documentation :"The '_MENU_' variable is replaced with a default select list of 10, 25, 50 and 100, and can be replaced with a custom select box if required".
can you explain how to do this?
thanks and regards.

allan

Hi laure,

I certainly can :-). This question has cropped up quite a few times in the forums actually, so what I've done is to update the example code to show how to use the macro or to use an override ( http://datatables.net/usage#oLanguage.sLengthMenu ):

[code]
/* Language change only */
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "Display _MENU_ records"
}
} );
} );

/* Language and options change */
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": 'Display '+
'10'+
'20'+
'30'+
'40'+
'50'+
'All'+
' records'
}
} );
} );
[/code]

Hope this helps!
Allan

mrkevans

This works, for updating the select box, but for some reason datatables still defaults to display 10 at first.

If you do the below, the default display still starts as 10.

How can i customize the default startup value?

[code]
"oLanguage": {
"sLengthMenu": 'Display '+
'50'+
'100'+
'200'+
'All'+
' records'},
[/code]

DustinDavis

The values are set by

[code]
this._iDisplayLength = 10;
this._iDisplayStart = 0;
this._iDisplayEnd = 10;
[/code]
I am trying to find a way to set this via the config passed in, but no luck yet

DustinDavis

Ok i got it. You need to check out the source code. I found this:

[code]
_fnMap( oSettings.oFeatures, oInit, "bPaginate" );
_fnMap( oSettings.oFeatures, oInit, "bLengthChange" );
_fnMap( oSettings.oFeatures, oInit, "bFilter" );
_fnMap( oSettings.oFeatures, oInit, "bSort" );
_fnMap( oSettings.oFeatures, oInit, "bInfo" );
_fnMap( oSettings.oFeatures, oInit, "bProcessing" );
_fnMap( oSettings.oFeatures, oInit, "bAutoWidth" );
_fnMap( oSettings.oFeatures, oInit, "bSortClasses" );
_fnMap( oSettings.oFeatures, oInit, "bServerSide" );
_fnMap( oSettings, oInit, "asStripClasses" );
_fnMap( oSettings, oInit, "fnRowCallback" );
_fnMap( oSettings, oInit, "fnHeaderCallback" );
_fnMap( oSettings, oInit, "fnFooterCallback" );
_fnMap( oSettings, oInit, "fnInitComplete" );
_fnMap( oSettings, oInit, "fnServerData" );
_fnMap( oSettings, oInit, "aaSorting" );
_fnMap( oSettings, oInit, "aaSortingFixed" );
_fnMap( oSettings, oInit, "sPaginationType" );
_fnMap( oSettings, oInit, "sAjaxSource" );
_fnMap( oSettings, oInit, "iCookieDuration" );
_fnMap( oSettings, oInit, "sDom" );
_fnMap( oSettings, oInit, "oSearch", "oPreviousSearch" );
_fnMap( oSettings, oInit, "aoSearchCols", "aoPreSearchCols" );
_fnMap( oSettings, oInit, "iDisplayLength", "_iDisplayLength" );
_fnMap( oSettings, oInit, "bJQueryUI", "bJUI" );
[/code]

As you can see, it maps the values. So to answer your question:

[code]
_dataGridRef = $('#dataGrid').dataTable({
"bAutoWidth": false,
"bFilter": true,
"sDom": 'T<"clear">frtip',
"sPaginationType": "full_numbers",
"iDisplayLength": 20,
"iDisplayEnd" : 20,

"oLanguage":{
"sSearch": "Find:"
}

});
[/code]

mrkevans

Awesome! Thank you titan 2782.

That worked perfectly!