Strange behaviour with oLengthMenu alteration

Ekoster

I'm localizing my datatables messages which is going well (go documentation too). Now, I've strange results with the oLengthMenu. Let me describe it.

the code:
[code]"sLengthMenu": '' +
'10' +
'20' +
'30' +
'@Site.Resources.System.Labels.lblAllRecords' +
' @Site.Resources.System.Labels.lblRecordPerPage',
[/code]

With this I would suspect a droplist with the last value in the list a word 'All' and then some text, in this case ' records per page'. But instead I get what I want, and then the original droplist is shown. The new one doesn't work and the old one (which should not be shown) does.

Any advice?

Ekoster

So I came across a handy tool, and reproduced what I mean here.
http://live.datatables.net/jawupew/1/edit?js,output

tangerine

What happens if you fix the two Javascript warnings?

allan

No difference, they are just warnings.

This looks like a bug in 1.10 to me. Doing it with 1.9.4 allows it to work as expected: http://live.datatables.net/jawupew/2/edit .

@Ekoster - thanks for flagging this up. I'll look into it and commit a fix when I get into the office tomorrow morning.

Allan

Ekoster

Hello Allan,

No problem. In the mean time I jumped into your code. Though I must admit I only start using it yesterday, so my findings may not be 100%. I came across this cause:

On line 3172 of the code you see this section
[code]var a = settings.oLanguage.sLengthMenu.split(/(_MENU_)/);
div.children()
.append( a[0] )
.append( select )
.append( a[2] );
[/code]

This will mean that if you do not have "_MENU_" in the "sLengthMenu" part, you will still append the defined "select" starting at line 3156.

The way my investigation of a solution goes is a three step solution. First to only do the append if "_MENU_" exists in the variable. This results in the fact that the (in my example) second droplist is not shown. Great, but the first doesn't work and has no style. So the second part is to replace the "" in the variable with the correct class stuff, as in line 3156. This is nice too. But the third part I don't see yet. The list doesn't trigger the data refresh for some reason. Anyway the code I have for this little test is bellow.

Starting at line 3172 comment this code
[code]var a = settings.oLanguage.sLengthMenu.split(/(_MENU_)/);
div.children()
.append(a[0])
.append(select)
.append(a[2]);
[/code]

Then add:
[code]var a = null;
if (settings.oLanguage.sLengthMenu.indexOf("_MENU_") > -1) {
a = settings.oLanguage.sLengthMenu.split(/(_MENU_)/);
div.children()
.append(a[0])
.append(select)
.append(a[2]);
} else {
a = settings.oLanguage.sLengthMenu.replace("", "");
div.children().append(a);
}
[/code]

Now this is still not the best solution I think, but the start is there. I hope you don't mind me explaining my findings, but I just can't help myself fiddling with (any) code to figure out what/why/how things are happening.

Edgar

allan

Delighted - thanks for your thoughts! I might tried to find a way of doing it with less code tomorrow when I take a look, I'm trying to keep the core size down as low as possible! But that looks like a nice starting point, thanks.

Allan

allan

Fix committed here: https://github.com/DataTables/DataTablesSrc/commit/ef259f664 . I'll be releasing an rc1 of 1.10 soon which will have this in it.

Allan

Ekoster

Can you see if I missed something in my datatables.js file? I changed the things to match your changes.

[code] div[0].id = tableId+'_length';
}

// This split doesn't matter where _MENU_ is, we get three items back from it
// Customization for fix ef259f664
var a = settings.oLanguage.sLengthMenu.split(/(_MENU_)/);
div.children().append( a.length > 1 ?
[ a[0], select, a[2] ] :
a[0]
);

select
.val( settings._iDisplayLength )
.bind( 'change.DT', function(e) {
_fnLengthChange( settings, $(this).val() );
} );

// Update node value whenever anything changes the table's length
$(settings.nTable).bind( 'length.dt.DT', function (e, s, len) {
$('select', div).val(len);
} );

return div[0];
[/code]

allan

Nothing obvious. Is it not working for you? Have you tried updating the the release candidate which has this fix in?

Allan

Ekoster

Hi Allen, I haven't tried that yet. I'll try to do some tests later this week. Maybe I have a typo somewhere, that's possible, so I'll revert to a easy layout first.

The reason why I haven't tried the release cadidate is for I just added the mRender, which I thought would need to be changed (but I have to check that again too)

allan

mRender should still function in the rc as it did in 1.9.

Allan

Ekoster

Strange, I would have thought I had clicked 'post comment', for I'm missing the last entry. Oh well.

What I found is that in my code the "SELECT" tag still has the attributes I gave it which is none. If I use "_MENU_" the "SELECT" tag gets classes and an id. I'll see what happens if I pass the same ones.

coolblades

Hi,
I am testing my datatable with IE8 and noticed that the new code in release 1.10.0
var a = settings.oLanguage.sLengthMenu.split(/(MENU)/);
div.children().append( a.length > 1 ?
[ a[0], select, a[2] ] :
a[0]
);
is not working in IE8.

I read here :
http://stackoverflow.com/questions/4514144/js-string-split-without-removing-the-delimiters
someone comment on it that it doesn't work for some IEs, and I verified on IE8 it does not work, but IE11 works. I think IE8 doesn't do regex split.

I came up with this to cover the cases where MENU can be in the beginning, middle, end or not at all:

var a = settings.oLanguage.sLengthMenu;
        var mIndex = a.indexOf("_MENU_");
        if (mIndex !== -1) {
            if (mIndex === 0) {//at beginning
                a = [select, a.substring(6)]
            }
            else if (mIndex === settings.oLanguage.sLengthMenu.length - 6) {//at the end
                a = [a.substring(0, mIndex), select]
            }
            else {//in the middle
                a = [a.substring(0, mIndex), select, a.substring(mIndex+6)]
            }
        }
        div.children().append(a);

feel free to come up with something simpler.
I tested with IE11 & 8.