X-Git-Url: http://source.jalview.org/gitweb/?a=blobdiff_plain;f=webapp%2Fresources%2Fdatatables-1.9.4%2Fexamples%2Fapi%2Fmulti_filter_select.html;fp=webapp%2Fresources%2Fdatatables-1.9.4%2Fexamples%2Fapi%2Fmulti_filter_select.html;h=befe999b26c0190210eb3fe91da9355c0993ee0b;hb=9bb6ee99ca7f738fac1087190b5481b8fe6e8d9f;hp=0000000000000000000000000000000000000000;hpb=2e3f6b76be585306f1003d849831840c0adb3360;p=proteocache.git diff --git a/webapp/resources/datatables-1.9.4/examples/api/multi_filter_select.html b/webapp/resources/datatables-1.9.4/examples/api/multi_filter_select.html new file mode 100644 index 0000000..befe999 --- /dev/null +++ b/webapp/resources/datatables-1.9.4/examples/api/multi_filter_select.html @@ -0,0 +1,759 @@ + + + + + + + DataTables example + + + + + + +
+
+ DataTables individual column filtering example (using select menus) +
+ +

Preamble

+

This example is almost identical to individual column example and provides the same functionality, but using <select> menus rather than input elements. The API plug-in function fnGetColumnData from Benedikt Forchhammer provides much of the logic processing required, and integration with a table is almost trivial.

+

One possible interaction chance would be to make use of fnGetColumnData's ability to get filtered data, so you could have the possible filtering values in the select menus to update to only those in the table, rather than all values.

+ +

Live example

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS grade
TridentInternet + Explorer 4.0Win 95+4X
TridentInternet + Explorer 5.0Win 95+5C
TridentInternet + Explorer 5.5Win 95+5.5A
TridentInternet + Explorer 6Win 98+6A
TridentInternet Explorer 7Win XP SP2+7A
TridentAOL browser (AOL desktop)Win XP6A
GeckoFirefox 1.0Win 98+ / OSX.2+1.7A
GeckoFirefox 1.5Win 98+ / OSX.2+1.8A
GeckoFirefox 2.0Win 98+ / OSX.2+1.8A
GeckoFirefox 3.0Win 2k+ / OSX.3+1.9A
GeckoCamino 1.0OSX.2+1.8A
GeckoCamino 1.5OSX.3+1.8A
GeckoNetscape 7.2Win 95+ / Mac OS 8.6-9.21.7A
GeckoNetscape Browser 8Win 98SE+1.7A
GeckoNetscape Navigator 9Win 98+ / OSX.2+1.8A
GeckoMozilla 1.0Win 95+ / OSX.1+1A
GeckoMozilla 1.1Win 95+ / OSX.1+1.1A
GeckoMozilla 1.2Win 95+ / OSX.1+1.2A
GeckoMozilla 1.3Win 95+ / OSX.1+1.3A
GeckoMozilla 1.4Win 95+ / OSX.1+1.4A
GeckoMozilla 1.5Win 95+ / OSX.1+1.5A
GeckoMozilla 1.6Win 95+ / OSX.1+1.6A
GeckoMozilla 1.7Win 98+ / OSX.1+1.7A
GeckoMozilla 1.8Win 98+ / OSX.1+1.8A
GeckoSeamonkey 1.1Win 98+ / OSX.2+1.8A
GeckoEpiphany 2.20Gnome1.8A
WebkitSafari 1.2OSX.3125.5A
WebkitSafari 1.3OSX.3312.8A
WebkitSafari 2.0OSX.4+419.3A
WebkitSafari 3.0OSX.4+522.1A
WebkitOmniWeb 5.5OSX.4+420A
WebkitiPod Touch / iPhoneiPod420.1A
WebkitS60S60413A
PrestoOpera 7.0Win 95+ / OSX.1+-A
PrestoOpera 7.5Win 95+ / OSX.2+-A
PrestoOpera 8.0Win 95+ / OSX.2+-A
PrestoOpera 8.5Win 95+ / OSX.2+-A
PrestoOpera 9.0Win 95+ / OSX.3+-A
PrestoOpera 9.2Win 88+ / OSX.3+-A
PrestoOpera 9.5Win 88+ / OSX.3+-A
PrestoOpera for WiiWii-A
PrestoNokia N800N800-A
PrestoNintendo DS browserNintendo DS8.5C/A1
KHTMLKonqureror 3.1KDE 3.13.1C
KHTMLKonqureror 3.3KDE 3.33.3A
KHTMLKonqureror 3.5KDE 3.53.5A
TasmanInternet Explorer 4.5Mac OS 8-9-X
TasmanInternet Explorer 5.1Mac OS 7.6-91C
TasmanInternet Explorer 5.2Mac OS 8-X1C
MiscNetFront 3.1Embedded devices-C
MiscNetFront 3.4Embedded devices-A
MiscDillo 0.8Embedded devices-X
MiscLinksText only-X
MiscLynxText only-X
MiscIE MobileWindows Mobile 6-C
MiscPSP browserPSP-C
Other browsersAll others--U
+
+
+ + +

Initialisation code

+ 
(function($) {
+/*
+ * Function: fnGetColumnData
+ * Purpose:  Return an array of table values from a particular column.
+ * Returns:  array string: 1d data array 
+ * Inputs:   object:oSettings - dataTable settings object. This is always the last argument past to the function
+ *           int:iColumn - the id of the column to extract the data from
+ *           bool:bUnique - optional - if set to false duplicated values are not filtered out
+ *           bool:bFiltered - optional - if set to false all the table data is used (not only the filtered)
+ *           bool:bIgnoreEmpty - optional - if set to false empty values are not filtered from the result array
+ * Author:   Benedikt Forchhammer <b.forchhammer /AT\ mind2.de>
+ */
+$.fn.dataTableExt.oApi.fnGetColumnData = function ( oSettings, iColumn, bUnique, bFiltered, bIgnoreEmpty ) {
+	// check that we have a column id
+	if ( typeof iColumn == "undefined" ) return new Array();
+	
+	// by default we only want unique data
+	if ( typeof bUnique == "undefined" ) bUnique = true;
+	
+	// by default we do want to only look at filtered data
+	if ( typeof bFiltered == "undefined" ) bFiltered = true;
+	
+	// by default we do not want to include empty values
+	if ( typeof bIgnoreEmpty == "undefined" ) bIgnoreEmpty = true;
+	
+	// list of rows which we're going to loop through
+	var aiRows;
+	
+	// use only filtered rows
+	if (bFiltered == true) aiRows = oSettings.aiDisplay; 
+	// use all rows
+	else aiRows = oSettings.aiDisplayMaster; // all row numbers
+
+	// set up data array	
+	var asResultData = new Array();
+	
+	for (var i=0,c=aiRows.length; i<c; i++) {
+		iRow = aiRows[i];
+		var aData = this.fnGetData(iRow);
+		var sValue = aData[iColumn];
+		
+		// ignore empty values?
+		if (bIgnoreEmpty == true && sValue.length == 0) continue;
+
+		// ignore unique values?
+		else if (bUnique == true && jQuery.inArray(sValue, asResultData) > -1) continue;
+		
+		// else push the value onto the result data array
+		else asResultData.push(sValue);
+	}
+	
+	return asResultData;
+}}(jQuery));
+
+
+function fnCreateSelect( aData )
+{
+	var r='<select><option value=""></option>', i, iLen=aData.length;
+	for ( i=0 ; i<iLen ; i++ )
+	{
+		r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
+	}
+	return r+'</select>';
+}
+
+
+$(document).ready(function() {
+	/* Initialise the DataTable */
+	var oTable = $('#example').dataTable( {
+		"oLanguage": {
+			"sSearch": "Search all columns:"
+		}
+	} );
+	
+	/* Add a select menu for each TH element in the table footer */
+	$("tfoot th").each( function ( i ) {
+		this.innerHTML = fnCreateSelect( oTable.fnGetColumnData(i) );
+		$('select', this).change( function () {
+			oTable.fnFilter( $(this).val(), i );
+		} );
+	} );
+} );
+ + + + +

Other examples

+
+

Basic initialisation

+ + +

Advanced initialisation

+ + +

API

+ +
+ +
+

Data sources

+ + +

Server-side processing

+ + +

Ajax data source

+ + +

Plug-ins

+ +
+ + + +
+ + \ No newline at end of file