From 6a568ed4cf0b50bb82e41d3b1fce28619e49fb03 Mon Sep 17 00:00:00 2001 From: Caleb Harrelson Date: Fri, 23 Aug 2013 13:10:11 -0500 Subject: [PATCH] Added plugin to hijack length menu into a length + all/selected items. --- .../row-based/TableTools.ShowSelectedOnly.js | 163 ++++++++++++++++++ 1 file changed, 163 insertions(+) create mode 100644 filtering/row-based/TableTools.ShowSelectedOnly.js diff --git a/filtering/row-based/TableTools.ShowSelectedOnly.js b/filtering/row-based/TableTools.ShowSelectedOnly.js new file mode 100644 index 0000000..f8dc4ba --- /dev/null +++ b/filtering/row-based/TableTools.ShowSelectedOnly.js @@ -0,0 +1,163 @@ +/** + * Used in combination with TableTools and selectable rows, this will allow you to switch between showing all rows and just the selected ones. + * @author Caleb Harrelson + * + * @example + * $('#example').dataTable({ + * "sDom": 'T<"clear">Sfrtip', + * "oTableTools": { + * "sRowSelect": "multi", + * }, + * "oLanguage": { + * "oFilterSelectedOptions": { + * AllText: "All Widgets", + * SelectedText: "Selected Widgets" + * } + * } + * }); + */ + +(function (window, document, $, undefined) { + + $.fn.dataTable.SelectedLengthMenu = function(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 box to show all or only selected items + var oFilterSelectedOptions = oSettings.oLanguage.oFilterSelectedOptions; + if (!oFilterSelectedOptions) + oFilterSelectedOptions = { "AllText": "All Items", "SelectedText": "Selected Items" }; + + var sSelectedMenu = ''; + + + + var nLength = document.createElement('div'); + if (!oSettings.aanFeatures.l) { + nLength.id = oSettings.sTableId + '_length'; + } + nLength.className = oSettings.oClasses.sLength; + var sLengthMenu = oSettings.oLanguage.sLengthMenu; + if (sLengthMenu == 'Show _MENU_ entries') + sLengthMenu = 'Show _MENU_ of _SELECTEDMENU_'; + + nLength.innerHTML = '' + sLengthMenu.replace('_MENU_', sStdMenu).replace('_SELECTEDMENU_', sSelectedMenu) + ''; + + var $lengthSelect = $('select[name="' + oSettings.sTableId + '_length"]', nLength); + if ($lengthSelect.length == 0) + $lengthSelect = $('select :eq(0)', nLength); + + /* + * Set the length to the current display length - thanks to Andrea Pavlovic for this fix, + * and Stefan Skopnik for fixing the fix! + */ + $lengthSelect.find('option[value="' + oSettings._iDisplayLength + '"]', nLength).attr("selected", true); + + + $lengthSelect.bind('change.DT', function(e) { + var iVal = $(this).val(); + + /* Update all other length options for the new display */ + var n = oSettings.aanFeatures.S; + 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); + oSettings.oApi._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; + } + + oSettings.oApi._fnDraw(oSettings); + }); + + + var $filterSelectedSelect = $('select[name="' + oSettings.sTableId + '_selectedFilter"]', nLength); + if ($filterSelectedSelect.length == 0) + $filterSelectedSelect = $('select :eq(1)', nLength); + + $filterSelectedSelect.find('option[value="' + oSettings._sFilterSelected + '"]', nLength).attr('selected', true); + + $filterSelectedSelect.on('change', function () { + oSettings._sFilterSelected = $(this).val(); + $('#' + oSettings.sTableId).dataTable().fnDraw(); + }); + + + $('select', nLength).attr('aria-controls', oSettings.sTableId); + + return nLength; + }; + + $.fn.dataTableExt.afnFiltering.push( + function (oSettings, aData, iDataIndex) { + var $filterSelectedSelect = $('select[name="' + oSettings.sTableId + '_selectedFilter"]'); + if ($filterSelectedSelect.length == 0) + return true; // feature not enabled + + if ($filterSelectedSelect.val() == 'All') + return true; // all items selected + + + var oTable = $('#' + oSettings.sTableId).dataTable(); + var row = oTable.fnGetNodes(iDataIndex); + var oTableTools = TableTools.fnGetInstance(oSettings.sTableId); + var isSelected = oTableTools.fnIsSelected(row); + + return isSelected; + } + ); + + + // Subscribe the feature plug-in to DataTables, ready for use + $.fn.dataTableExt.aoFeatures.push({ + "fnInit": function (oSettings) { + return new $.fn.dataTable.SelectedLengthMenu(oSettings); + }, + "cFeature": "S", + "sFeature": "SelectedLengthMenu" + }); + + + +})(window, document, jQuery); \ No newline at end of file