Download "Unobtrusive sortable table" script

Put this into your <HEAD> section

	<style type="text/css">
	body{
		font-size:0.8em;
		font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
	}
	table thead td{
		font-weight:bold;
		cursor:pointer;
	}
	/* If you wish to highlight current sortable column, add layout effects below */
	.highlightedColumn{

	}
	</style>
	<script type="text/javascript">
	/************************************************************************************************************
	Sortable table script
	Copyright (C) 2005  DTHMLGoodies.com, Alf Magne Kalleland

	This library is free software; you can redistribute it and/or
	modify it under the terms of the GNU Lesser General Public
	License as published by the Free Software Foundation; either
	version 2.1 of the License, or (at your option) any later version.

	This library is distributed in the hope that it will be useful,
	but WITHOUT ANY WARRANTY; without even the implied warranty of
	MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
	Lesser General Public License for more details.

	You should have received a copy of the GNU Lesser General Public
	License along with this library; if not, write to the Free Software
	Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301  USA

	Dhtmlgoodies.com., hereby disclaims all copyright interest in this script
	written by Alf Magne Kalleland.

	Alf Magne Kalleland, 2005
	Owner of DHTMLgoodies.com


	************************************************************************************************************/

	var tableWidget_okToSort = true;
	var tableWidget_arraySort = new Array();
	tableWidget_tableCounter = 1;
	var activeColumn = new Array();
	var currentColumn = false;

	function sortNumeric(a,b){

		a = a.replace(/,/,'.');
		b = b.replace(/,/,'.');
		a = a.replace(/[^\d\.\/]/g,'');
		b = b.replace(/[^\d\.\/]/g,'');
		if(a.indexOf('/')>=0)a = eval(a);
		if(b.indexOf('/')>=0)b = eval(b);
		return a/1 - b/1;
	}


	function sortString(a, b) {

	  if ( a.toUpperCase() < b.toUpperCase() ) return -1;
	  if ( a.toUpperCase() > b.toUpperCase() ) return 1;
	  return 0;
	}

	function sortTable()
	{
		if(!tableWidget_okToSort)return;
		tableWidget_okToSort = false;
		/* Getting index of current column */
		var obj = this;
		var indexThis = 0;
		while(obj.previousSibling){
			obj = obj.previousSibling;
			if(obj.tagName=='TD')indexThis++;
		}

		if(this.getAttribute('direction') || this.direction){
			direction = this.getAttribute('direction');
			if(navigator.userAgent.indexOf('Opera')>=0)direction = this.direction;
			if(direction=='ascending'){
				direction = 'descending';
				this.setAttribute('direction','descending');
				this.direction = 'descending';
			}else{
				direction = 'ascending';
				this.setAttribute('direction','ascending');
				this.direction = 'ascending';
			}
		}else{
			direction = 'ascending';
			this.setAttribute('direction','ascending');
			this.direction = 'ascending';
		}

		var tableObj = this.parentNode.parentNode.parentNode;
		var tBody = tableObj.getElementsByTagName('TBODY')[0];

		var widgetIndex = tableObj.getAttribute('tableIndex');
		if(!widgetIndex)widgetIndex = tableObj.tableIndex;

		if(currentColumn)currentColumn.className='';
		document.getElementById('col' + widgetIndex + '_' + (indexThis+1)).className='highlightedColumn';
		currentColumn = document.getElementById('col' + widgetIndex + '_' + (indexThis+1));


		var sortMethod = tableWidget_arraySort[widgetIndex][indexThis]; // N = numeric, S = String
		if(activeColumn[widgetIndex] && activeColumn[widgetIndex]!=this){
			if(activeColumn[widgetIndex])activeColumn[widgetIndex].removeAttribute('direction');
		}

		activeColumn[widgetIndex] = this;

		var cellArray = new Array();
		var cellObjArray = new Array();
		for(var no=1;no<tableObj.rows.length;no++){
			var content= tableObj.rows[no].cells[indexThis].innerHTML+'';
			cellArray.push(content);
			cellObjArray.push(tableObj.rows[no].cells[indexThis]);
		}

		if(sortMethod=='N'){
			cellArray = cellArray.sort(sortNumeric);
		}else{
			cellArray = cellArray.sort(sortString);
		}

		if(direction=='descending'){
			for(var no=cellArray.length;no>=0;no--){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');
						tBody.appendChild(cellObjArray[no2].parentNode);
					}
				}
			}
		}else{
			for(var no=0;no<cellArray.length;no++){
				for(var no2=0;no2<cellObjArray.length;no2++){
					if(cellObjArray[no2].innerHTML == cellArray[no] && !cellObjArray[no2].getAttribute('allreadySorted')){
						cellObjArray[no2].setAttribute('allreadySorted','1');
						tBody.appendChild(cellObjArray[no2].parentNode);
					}
				}
			}
		}

		for(var no2=0;no2<cellObjArray.length;no2++){
			cellObjArray[no2].removeAttribute('allreadySorted');
		}

		tableWidget_okToSort = true;


	}
	function initSortTable(objId,sortArray)
	{
		var obj = document.getElementById(objId);
		obj.setAttribute('tableIndex',tableWidget_tableCounter);
		obj.tableIndex = tableWidget_tableCounter;
		tableWidget_arraySort[tableWidget_tableCounter] = sortArray;
		var tHead = obj.getElementsByTagName('THEAD')[0];
		var cells = tHead.getElementsByTagName('TD');
		for(var no=0;no<cells.length;no++){
			if(sortArray[no]){
				cells[no].onclick = sortTable;
			}else{
				cells[no].style.cursor = 'default';
			}
		}
		for(var no2=0;no2<sortArray.length;no2++){	/* Right align numeric cells */
			if(sortArray[no2] && sortArray[no2]=='N')obj.rows[0].cells[no2].style.textAlign='right';
		}

		tableWidget_tableCounter++;
	}

	</script>

Put this into your <BODY> section

<table id="myTable">
	<!--
	id of <col> tags should be "col" + index of table(1 = first table, 2 = second table) + _ (underscore) + column index(1.2.3.4...)
	-->
	<colgroup>
		<col id="col1_1"></col>
		<col id="col1_2"></col>
		<col id="col1_3"></col>
		<col id="col1_4"></col>
		<col id="col1_5"></col>
	</colgroup>
	<thead>
		<tr>
			<td>Name</td>
			<td>Age</td>
			<td>Position</td>
			<td>Income</td>
			<td>Gender</td>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>John</td>
			<td>37</td>
			<td>Managing director</td>
			<td>90.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Susan</td>
			<td>34</td>
			<td>Partner</td>
			<td>90.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>David</td>
			<td>29</td>
			<td>Head of production</td>
			<td>70.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Laura</td>
			<td>29</td>
			<td>Head of marketing</td>
			<td>70.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Kate</td>
			<td>18</td>
			<td>Marketing</td>
			<td>50.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Mona</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Mike</td>
			<td>21</td>
			<td>Marketing</td>
			<td>53.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Mark</td>
			<td>25</td>
			<td>Production</td>
			<td>52.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Peter</td>
			<td>33</td>
			<td>Production</td>
			<td>55.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Jennifer</td>
			<td>24</td>
			<td>Production</td>
			<td>49.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>David</td>
			<td>25</td>
			<td>Photography</td>
			<td>51.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Anna</td>
			<td>42</td>
			<td>Head of photography</td>
			<td>56.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Rita</td>
			<td>30</td>
			<td>Photography</td>
			<td>54.000</td>
			<td>Female</td>
		</tr>
		<tr>
			<td>Magnus</td>
			<td>25</td>
			<td>Freelancer</td>
			<td>65.000</td>
			<td>Male</td>
		</tr>
		<tr>
			<td>Johnny</td>
			<td>29</td>
			<td>Freelancer</td>
			<td>63.000</td>
			<td>Male</td>
		</tr>

	</tbody>
</table>
<script type="text/javascript">
initSortTable('myTable',Array('S','N','S','N','S'));
</script>

Configuration

Table syntax

This script is very easy to set up. First you create your table. Example:

<table id="myTable">
  <colgroup>
    <col id="col1_1"></col>
    <col id="col1_2"></col>
    <col id="col1_3"></col>
    <col id="col1_4"></col>
    <col id="col1_5"></col>
  </colgroup>
  <thead>
    <tr>
      <td>Name</td>
      <td>Age</td>
      <td>Position</td>
      <td>Income</td>
      <td>Gender</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John</td>
      <td>37</td>
      <td>Managing director</td>
      <td>90.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Susan</td>
      <td>34</td>
      <td>Partner</td>
      <td>90.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>David</td>
      <td>29</td>
      <td>Head of production</td>
      <td>70.000</td>
      <td>Male</td>
    </tr>
    <tr>
      <td>Laura</td>
      <td>29</td>
      <td>Head of marketing</td>
      <td>70.000</td>
      <td>Female</td>
    </tr>
    <tr>
      <td>Kate</td>
      <td>18</td>
      <td>Marketing</td>
      <td>50.000</td>
      <td>Female</td>
    </tr>
  </tbody>
</table>

It's important that you give your table an "id"(example: <TABLE id="myTable">). The table should also have a <THEAD> and a <TBODY> tag. <THEAD> is used to identify the table header. The <TD> tags here are the ones you can click on to sort the table. The content of the <TBODY> tag is the sortable part of your table.

The <COLGROUP> is used to highlight the column you're table is sorted by. This is an effect you can add by adding css rules to the highlightedColumn class.

Initialize the script

A Javascript function "initSortTable" is used to make your table sortable. You call this function on a line below your HTML table. This function takes two arguments.

ID of table = The id of your table(example:"myTable" for <TABLE id="myTable">)
An array indicating how to sort your table. Possible values: "S" = String, "N" = Numeric, false = No sort)

This is an example of how this function can be called:

Highlight current column

It's possible to add highlight effects to the column the table is sorted by. This is very simple. Just add some css effects to the css class "highlightedColumn",
example:

.highlightedColumn{
background-color:#CCC;
}

Comments

Hi,

NEW A.I App Exploits Elon Musk & ClickBank
Every 60 Seconds For $426/Paydays &
Unlimited FREE Automated Traffic!

If you are interested, write to me or follow the link: http://hornoselectricos.online/tesler/

Best Regards, Mark

MarkStrong at 06:09AM, 2024/02/01.

100%実物写真ですし、品質が完璧です!"スーパーコピーブランド財布激安偽物財布激安コピールイヴィトン財布偽物,偽物財布コピーエルバーキンコピースーパーコピー財布ブランド財布コピーブランドコピー激安バレンシアガスーパーコピー激安ロレックススーパーコピー時計ブランド財布激安偽物財布激安コピールイヴィトン財布偽物,偽物財布コピーブランド激安市場-jck35販売:ブランド財布コピー }}}}}}
https://www.bagssjp.com/product/detail-3079.html
https://www.bagssjp.com/product/detail-3767.html
https://www.bagssjp.com/product/detail-7365.html
https://www.bagssjp.com/product/detail-11513.html
https://www.bagssjp.com/product/detail-8787.html

Bagssjplow at 02:35AM, 2024/02/16.