创建一个通用的sortableTable对象，用于在每次使用JavaScript单击列时按字母顺序对表元素进行排序 [英] Create a generic sortableTable object to be used to alphabetically sort a table elements each time a column is clicked using only JavaScript

问题描述

我正在研究不使用jQuery但只使用JavaScript的项目，我们需要按字母顺序对表值进行排序（没有任何外部库）。

I'm working on project which don't use jQuery but only JavaScript and we have a need to sort alphabetically ascending a table values (without any external library).

目标是在每次单击一列（ th 元素）时对行元素进行排序。

The objective is to sort rows elements each time a column (th element) is clicked.

示例

如果我有这张表

当我点击姓名时，表格应该像这样刷新：

When I click on "Names", the table should be refreshed like that:

当我点击电话时，表格应该像这样刷新：

When I click on "Tel", the table should be refreshed like that:

推荐答案

我正在分享我自己的解决方案。如果您有任何评论或建议，请分享。

I'm sharing my own solution here. If you have any remark or suggestions, please share.

我正在通过添加逆序功能来更新我的解决方案：

• 例如，当您第一次点击名称时，表格将以升序进行刷新名称。


• 当您在名称上单击第二次时，表格将以降序名称进行刷新。


• 当您在名称上第三次点击时，该表格将使用升序名称进行刷新。


• 等...

• When you first click on Names for example, the table will be refreshed with an ascending order of names.
• When you click a 2nd time on Names, the table will be refreshed with a descending order of names.
• When you click a 3rd time on Names, the table will be refreshed with an ascending order of names.
• etc...

var sortableTable = {
	/**
	* The table to sort
	*/
	table: null,
	getTable: function(){
		return this.table;
	},
	setTable: function(table){
		this.table = table;
	},
	/**
	* The column used for sorting
	*/	
	element: null,
	getElement: function(){
		return this.element;
	},
	setElement: function(element){
		this.element = element;
	},
    /**
    * When ooderDirection is 1 => Ascending order 
    * When ooderDirection is -1 => Descending order 
    */
	orderDirection: 1,
	getOrderDirection: function(){
		return this.orderDirection;
	},
	setOrderDirection: function(orderDirection){
		this.orderDirection = orderDirection;
	},
	/**
	* Get table rows elements
	*/		
	getRows: function(){
		var rows = [];
		if(null !== this.getTable()){
			var allRows = this.getTable().rows;
			/*
				When I returned allRows directly, 
				in the sort function when I do: rows.sort();
				it display an error: Uncaught TypeError: rows.sort is not a function
				So I'm converting this object to an array
			*/
			var arrayRows = [];
			//allRows contains all rows with <th> elements, 
			//so I'm removing th elements (index 0)
			for(let i=1 ; i<allRows.length ; i++){
				arrayRows.push(allRows[i]);
			}
			return (arrayRows);
		}
		return null;
	},
	/**
	* Display rows using the sort result
	*/		
	refresh: function(rows){
		for(let i=0 ; i<rows.length ; i++){
			this.getTable().appendChild(rows[i]);
		}
	},
	/**
	* Sort alphabetically (ASC)
	*/		
	sort: function(indexOfClickedTh){
		var rows = this.getRows();
        var that = this;
		rows.sort(function(item1, item2){
			var contentItem1 = item1.getElementsByTagName('td')[indexOfClickedTh].innerText;
			var contentItem2 = item2.getElementsByTagName('td')[indexOfClickedTh].innerText;
			let resultCompare = contentItem1.localeCompare(contentItem2);
            resultCompare = resultCompare * that.getOrderDirection();
			//console.info('comparing(' + contentItem1 + ', ' + contentItem2 + ')=' + resultCompare);	
			return resultCompare;
		});
		this.refresh(rows);
	}
}


//The first click will generate an ascending sort
var initialOderDirection = -1;

var myTableToSort = document.getElementById('users');
sortableTable.setTable(myTableToSort);
sortableTable.setOrderDirection(initialOderDirection);
var ListOfTh = document.getElementById('users').getElementsByTagName('th');
for(var i=0 ; i<ListOfTh.length ; i++){
	var oneTh = ListOfTh[i];
	oneTh.addEventListener("click", function(){
        //console.info("------> New sort based on '" + this.innerText + "' <------");
      
        // Set the current clicked <th> element
		sortableTable.setElement(this);
      
        //Inverse the order
        sortableTable.setOrderDirection( sortableTable.getOrderDirection() * -1 );
        
        //Do the sort and refresh table result
		sortableTable.sort(this.cellIndex);	
	});
};

table{
    font-size: 16px;
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}
table th{
    padding-top: 11px;
    padding-bottom: 11px;
    background-color: #6295a5;
    color: white;
}
table td{
    border: 1px solid #ddd;
    text-align: left;
    padding: 8px;
}
table tr:nth-child(even) {
    background-color: #f2f2f2;
}
table th{
	cursor: pointer;
}
table th:hover{
	color: #dea82e;
	background-color: #37545d;
}

<table id="users">
	<thead>
		<tr>
			<th>Names</th>
			<th>Functions</th>
			<th>Emails</th>
			<th>Tel</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>xMxxx</td>
			<td>Physicists</td>
			<td>[e-mail]</td>
			<td>00 55 99 99 99</td>
		</tr>
		<tr>
			<td>xJxxx</td>
			<td>Air Traffic Controllers</td>
			<td>[e-mail]</td>
			<td>00 22 99 99 99</td>
		</tr>
		<tr>
			<td>xExxx</td>
			<td>Engineer</td>
			<td>[e-mail]</td>
			<td>00 33 99 99 99</td>
		</tr>
		<tr>
			<td>xAxxx</td>
			<td>Mechanical engineer</td>
			<td>[e-mail]</td>
			<td>00 11 99 99 99</td>
		</tr>
		<tr>
			<td>xZxxx</td>
			<td>Doctor</td>
			<td>[e-mail]</td>
			<td>00 44 99 99 99</td>
		</tr>
		<tr>
			<td>xPxxx</td>
			<td>Professor</td>
			<td>[e-mail]</td>
			<td>00 66 99 99 99</td>
		</tr>
	</tbody>
</table>

这篇关于创建一个通用的sortableTable对象，用于在每次使用JavaScript单击列时按字母顺序对表元素进行排序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！