diff --git a/features/lengthChange.js b/features/lengthChange.js new file mode 100644 index 0000000..4f06a72 --- /dev/null +++ b/features/lengthChange.js @@ -0,0 +1,84 @@ +(function(window, document, $, undefined) { + + +$.fn.dataTableExt.oApi.fnLengthChange = function ( oSettings, iDisplay ) { + oSettings._iDisplayLength = iDisplay; + oSettings.oApi._fnCalculateEnd( oSettings ); + + /* If we have space to show extra rows (backing up from the end point - then do so */ + if ( oSettings._iDisplayEnd == oSettings.aiDisplay.length ) { + oSettings._iDisplayStart = oSettings._iDisplayEnd - oSettings._iDisplayLength; + if ( oSettings._iDisplayStart < 0 ) { + oSettings._iDisplayStart = 0; + } + } + + if ( oSettings._iDisplayLength == -1 ) { + oSettings._iDisplayStart = 0; + } + + oSettings.oApi._fnDraw( oSettings ); +}; + + +$.fn.dataTable.LengthLinks = function ( oSettings ) { + var container = $('
').addClass( oSettings.oClasses.sLength ); + var lastLength = -1; + var draw = function () { + // No point in updating - nothing has changed + if ( oSettings._iDisplayLength === lastLength ) { + return; + } + + var menu = oSettings.aLengthMenu; + var lang = menu.length===2 && $.isArray(menu[0]) ? menu[1] : menu; + var lens = menu.length===2 && $.isArray(menu[0]) ? menu[0] : menu; + + var out = $.map( lens, function (el, i) { + return el == oSettings._iDisplayLength ? + ''+lang[i]+'' : + ''+lang[i]+''; + } ); + + container.html( oSettings.oLanguage.sLengthMenu.replace( '_MENU_', out.join(' ') ) ); + lastLength = oSettings._iDisplayLength; + }; + + // API, so the feature wrapper can return the node to insert + this.container = container; + + // Update on each draw + oSettings.aoDrawCallback.push( { + "fn": function () { + draw(); + }, + "sName": "PagingControl" + } ); + + // Listen for events to change the page length + container.on( 'click', 'a', function (e) { + e.preventDefault(); + oSettings.oInstance.fnLengthChange( parseInt( $(this).attr('data-length'), 10 ) ); + } ); +} + +// Subscribe the feature plug-in to DataTables, ready for use +$.fn.dataTableExt.aoFeatures.push( { + "fnInit": function( oSettings ) { + var l = new $.fn.dataTable.LengthLinks( oSettings ); + return l.container[0]; + }, + "cFeature": "L", + "sFeature": "LengthLinks" +} ); + + +})(window, document, jQuery); + + +// DataTables initialisation +$(document).ready(function() { + $('#example').dataTable( { + "sDom": "Lfrtip" + } ); +} ); \ No newline at end of file