TableTools button for "Show Selected"

nyk

I like the button functionality that TableTools offers, however I noticed something that wasn't available that I think would make it better and that's a "Show Selected" button.

This button would show only the selected elements, and keep the event on the rows that does select/deselect, so that you would not only be able to view your selected rows, but also remove selections from those selected.

Does this functionality exist already, or is it something that has to be coded?

allan

That would need to be developed. Its a nice idea - you could use the filtering abilities in DataTables to do what you are looking for, but yes, I'm afraid I don't have any existing code for that.

If you do put it together, perhaps you could add a pull request to the DataTables plug-ins repo so others could also use the custom button?

Allan

phloopy

I hijacked the length menu instead of making it a button. Now it says "Show # of [All Items|Selected Items]". I also did my best to make it pluggable, see this pull request: https://github.com/DataTables/Plugins/pull/29

Code pasted here for searching, as the forums here were extremely helpful in the development of this plugin (kudos to allan):

[code]
/**
* 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 = '';
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 += '' + aLengthMenu[1][i] + '';
}
} else {
for (i = 0, iLen = aLengthMenu.length; i < iLen; i++) {
sStdMenu += '' + aLengthMenu[i] + '';
}
}
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 = '';
if (typeof oFilterSelectedOptions === 'object') {
sSelectedMenu += '' + oFilterSelectedOptions.AllText + '';
sSelectedMenu += '' + oFilterSelectedOptions.SelectedText + '';
} else {
sSelectedMenu += '' + oFilterSelectedOptions[0] + '';
sSelectedMenu += '' + oFilterSelectedOptions[1] + '';
}
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);
[/code]