Show jQuery Datatables aLengthMenu as <a> links, not <select> drop-down menu

Question

I am trying to work with jQuery Datatables plugin. It has everything I want, except that there is no flexibility in how to display aLengthMenu variables. It displays it in the <select> dropdown, which is nice, but I have a design that is not flexible and wants the variables to be just references.

Here's how it is currently displayed:

 "aLengthMenu": [[5, 15, 30, 60, -1], [5, 15, 30, 60, "All"]] 

I would really like it to simply display such links, just to click the link, and it will show the amount indicated as follows:

I know that I was fiddling with the core of the Datatables plugin and, more specifically, with the _fnFeatureHtmlLength function, but it would be so cool if I could help with this.

Answer 1

There is no easy way to do this without opening the jquery.dataTables.js file and editing it. Yes, you're right ... you will need to edit the function '_fnFeatureHtmlLength'.

I am working with jquery.dataTables.js version 1.9.1 Go to the function '_fnFeatureHtmlLength' (search the file for the function _fnFeatureHtmlLength (oSettings) 'and you should find it, mines on line 2296)

Since you are editing this file, I will make a backup first. Also, comment out the lines you are replacing so you can always refer to them.

edits

 function _fnFeatureHtmlLength(oSettings) { if (oSettings.oScroll.bInfinite) { return null; } /* This can be overruled by not using the _MENU_ var/macro in the language variable */ var sName = 'name="' + oSettings.sTableId + '_length"'; //var sStdMenu = '<select size="1" '+sName+'>'; var sStdMenu = ''; var i, iLen; var aLengthMenu = oSettings.aLengthMenu; if (aLengthMenu.length == 2 && typeof aLengthMenu[0] === 'object' && typeof aLengthMenu[1] === 'object') { for (i = 0, iLen = aLengthMenu[0].length; i < iLen; i++) { //sStdMenu += '<option value="' + aLengthMenu[0][i] + '">' + aLengthMenu[1][i] + '</option>'; sStdMenu += '<a href="#" value="' + aLengthMenu[0][i] + '">' + aLengthMenu[1][i] + '</a>'; } } else { for (i = 0, iLen = aLengthMenu.length; i < iLen; i++) { //sStdMenu += '<option value="' + aLengthMenu[i] + '">' + aLengthMenu[i] + '</option>'; sStdMenu += '<a href="#" value="' + aLengthMenu[i] + '">' + aLengthMenu[i] + '</a>'; } } //sStdMenu += '</select>'; var nLength = document.createElement('div'); if (!oSettings.aanFeatures.l) { nLength.id = oSettings.sTableId + '_length'; } nLength.className = oSettings.oClasses.sLength; nLength.innerHTML = '<label>' + oSettings.oLanguage.sLengthMenu.replace('_MENU_', sStdMenu) + '</label>'; /* * Set the length to the current display length - thanks to Andrea Pavlovic for this fix, * and Stefan Skopnik for fixing the fix! */ //$('select option[value="' + oSettings._iDisplayLength + '"]', nLength).attr("selected", true); //$('select', nLength).bind('change.DT', function (e) { $('a', nLength).bind('click', function (e) { //var iVal = $(this).val(); e.preventDefault(); var iVal = $(this).attr('value'); /* Update all other length options for the new display */ var n = oSettings.aanFeatures.l; for (i = 0, iLen = n.length; i < iLen; i++) { if (n[i] != this.parentNode) { //$('select', n[i]).val(iVal); } } /* Redraw the table */ oSettings._iDisplayLength = parseInt(iVal, 10); _fnCalculateEnd(oSettings); /* If we have space to show extra rows (backing up from the end point - then do so */ if (oSettings.fnDisplayEnd() == oSettings.fnRecordsDisplay()) { oSettings._iDisplayStart = oSettings.fnDisplayEnd() - oSettings._iDisplayLength; if (oSettings._iDisplayStart < 0) { oSettings._iDisplayStart = 0; } } if (oSettings._iDisplayLength == -1) { oSettings._iDisplayStart = 0; } _fnDraw(oSettings); }); //$('select', nLength).attr('aria-controls', oSettings.sTableId); return nLength; } 

I also made changes to the datatables.css file:

 .dataTables_length a{ margin-right:6px; } 

But you can style it. Also in the click event in an editable function, you might want to add an “active” class to the selected tag and style “a”, but you want to. Just remember to remove the active class from the rest of the "a".

I did not fully test these changes, and since I did not write the data, I do not know if these changes will have any side effects. Also, I have not tested any plug-ins ... so use at your own risk!