X-Git-Url: http://source.jalview.org/gitweb/?a=blobdiff_plain;f=webapp%2Fresources%2Fdatatables-1.9.4%2Fexamples%2Fplug-ins%2Fdom_sort.html;fp=webapp%2Fresources%2Fdatatables-1.9.4%2Fexamples%2Fplug-ins%2Fdom_sort.html;h=e4046f9723910ca954877361b7616e3fa108d6b1;hb=9bb6ee99ca7f738fac1087190b5481b8fe6e8d9f;hp=0000000000000000000000000000000000000000;hpb=2e3f6b76be585306f1003d849831840c0adb3360;p=proteocache.git diff --git a/webapp/resources/datatables-1.9.4/examples/plug-ins/dom_sort.html b/webapp/resources/datatables-1.9.4/examples/plug-ins/dom_sort.html new file mode 100644 index 0000000..e4046f9 --- /dev/null +++ b/webapp/resources/datatables-1.9.4/examples/plug-ins/dom_sort.html @@ -0,0 +1,1142 @@ + + + + + + + DataTables example + + + + + + +
+
+ DataTables live DOM sorting example +
+ +

Preamble

+

This example shows how you can use information available in the DOM to sort columns. Typically DataTables will read information to be sorted during it's initialisation phase, and this will not be updated based on user interaction, so sorting on columns which have, for example, form elements in them, may not reflect the current value of the input. To overcome this problem, you must update the data that DataTables will sort on, just prior to the sort. This method is much more efficient than actually sorting using the DOM, since only one DOM query is needed for each cell to be sorted.

+

The example below shows the first two columns as normal text with sorting as you would expect. The following columns all have a form input element of different kinds, and the information contained within is what DataTables will perform the sort on, based on the value at the time of the sort.

+

This is a fairly simple example, but it you aren't constrained to just using form input elements, you could use anything and customise your DOM queries to suit yourself. You could also update the sorting live as a user in entered data into a form using an event handler calling fnSort() or fnDraw().

+ +

Live example

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rendering engineBrowserPlatform(s)Engine versionCSS gradeCheck
TridentInternet + Explorer 4.0 + +
TridentInternet + Explorer 5.0 + +
TridentInternet + Explorer 5.5 + +
TridentInternet + Explorer 6 + +
TridentInternet Explorer 7 + +
TridentAOL browser (AOL desktop) + +
GeckoFirefox 1.0 + +
GeckoFirefox 1.5 + +
GeckoFirefox 2.0 + +
GeckoFirefox 3.0 + +
GeckoCamino 1.0 + +
GeckoCamino 1.5 + +
GeckoNetscape 7.2 + +
GeckoNetscape Browser 8 + +
GeckoNetscape Navigator 9 + +
GeckoMozilla 1.0 + +
GeckoMozilla 1.1 + +
GeckoMozilla 1.2 + +
GeckoMozilla 1.3 + +
GeckoMozilla 1.4 + +
GeckoMozilla 1.5 + +
GeckoMozilla 1.6 + +
GeckoMozilla 1.7 + +
GeckoMozilla 1.8 + +
GeckoSeamonkey 1.1 + +
GeckoEpiphany 2.20 + +
WebkitSafari 1.2 + +
WebkitSafari 1.3 + +
WebkitSafari 2.0 + +
WebkitSafari 3.0 + +
WebkitOmniWeb 5.5 + +
WebkitiPod Touch / iPhone + +
WebkitS60 + +
PrestoOpera 7.0 + +
PrestoOpera 7.5 + +
PrestoOpera 8.0 + +
PrestoOpera 8.5 + +
PrestoOpera 9.0 + +
PrestoOpera 9.2 + +
PrestoOpera 9.5 + +
PrestoOpera for Wii + +
PrestoNokia N800 + +
PrestoNintendo DS browser + +
KHTMLKonqureror 3.1 + +
KHTMLKonqureror 3.3 + +
KHTMLKonqureror 3.5 + +
TasmanInternet Explorer 4.5 + +
TasmanInternet Explorer 5.1 + +
TasmanInternet Explorer 5.2 + +
MiscNetFront 3.1 + +
MiscNetFront 3.4 + +
MiscDillo 0.8 + +
MiscLinks + +
MiscLynx + +
MiscIE Mobile + +
MiscPSP browser + +
Other browsersAll others + +
Rendering engineBrowserPlatform(s)Engine versionCSS gradeCheck
+
+
+ + +

Initialisation code

+ 
/* Create an array with the values of all the input boxes in a column */
+$.fn.dataTableExt.afnSortData['dom-text'] = function  ( oSettings, iColumn )
+{
+	var aData = [];
+	$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
+		aData.push( this.value );
+	} );
+	return aData;
+}
+
+/* Create an array with the values of all the select options in a column */
+$.fn.dataTableExt.afnSortData['dom-select'] = function  ( oSettings, iColumn )
+{
+	var aData = [];
+	$( 'td:eq('+iColumn+') select', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
+		aData.push( $(this).val() );
+	} );
+	return aData;
+}
+
+/* Create an array with the values of all the checkboxes in a column */
+$.fn.dataTableExt.afnSortData['dom-checkbox'] = function  ( oSettings, iColumn )
+{
+	var aData = [];
+	$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
+		aData.push( this.checked==true ? "1" : "0" );
+	} );
+	return aData;
+}
+
+/* Initialise the table with the required column sorting data types */
+$(document).ready(function() {
+	$('#example').dataTable( {
+		"aoColumns": [
+			null,
+			null,
+			{ "sSortDataType": "dom-text" },
+			{ "sSortDataType": "dom-text", "sType": "numeric" },
+			{ "sSortDataType": "dom-select" },
+			{ "sSortDataType": "dom-checkbox" }
+		]
+	} );
+} );
+ + + + +

Other examples

+
+

Basic initialisation

+ + +

Advanced initialisation

+ + +

API

+ +
+ +
+

Data sources

+ + +

Server-side processing

+ + +

Ajax data source

+ + +

Plug-ins

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