`
loven_11
  • 浏览: 59003 次
  • 性别: Icon_minigender_1
  • 来自: 南京
社区版块
存档分类
最新评论

js的table排序,支持多浏览器，多列同时排序，自定义排序

浏览器JavaScriptprototypeCC++ 
阅读更多

简单且轻松自定义排序规则：

1.initSortTable(asc,desc)；是初始化排序预操作（其实就是传入两张图片地址，标识排序方向的）

2.在需要排序的表格table上添加监听事件，sortColumn()；此处被我限定click事件作用在th对象上才有效的。

3.需要按列制定排序规则，即在th上添加type类型，例如<th type='string'>1</th>; 如果想要二重排序的话写成<th type='string,0'>1</th>,0标识列号，即本列排序时如果排序内容相同，则按照第零列排序。

4.这里的排序规则可以自由定义，当然目前的代码中只是传入了td单元格内容innerText值，也就是显示的文字。（不过你也可以修改下，传入一个对象）

 

可能文字描述不直观，附上一个例子吧：

<html>	
	<head>
		<title>sorttest</title>
		<script type="text/javascript" src="javascript/table-sort.js"></script>
	</head>
	<script >
		function init(){
			initSortTable("images/tablesorter/desc.gif","images/tablesorter/asc.gif");
		}
	</script>
	<body onload='init();'>
		<table onclick="sortColumn(event)">
			<thead>
				<tr>
					<th NOWRAP type="Number">ID</th>
					<th NOWRAP type="myDate,0">Date</th>
					<th NOWRAP type="str,0">Org</th>
					<th NOWRAP type="str,0">Dest</th>
					<th NOWRAP type="bool,0">Flip</th>
					<th NOWRAP type="ip,0">IP</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td NOWRAP><%=id %></td>
					<td nowrap><%=date %></td>
					<td NOWRAP><%=org %></td>
					<td NOWRAP><%=dest %></td>
					<td NOWRAP><%=flip %></td>
					<td NOWRAP><%=ip %></td>
				</tr>
			</tbody>
		<table>
	</body>
</html>

 

 

具体代码如下，里面包含了一下我自定义处理，比较撮。

var dom = (document.getElementsByTagName) ? true : false;
    var ie5 = (document.getElementsByTagName && document.all) ? true : false;
    var arrowUp, arrowDown;
    var mydefinedChar = "*";
    
//if (ie5 || dom)
    //initSortTable();
    function initSortTable(asc,desc) {   
        arrowUp = document.createElement("SPAN"); 
        arrowUp.style.display = "inline";
        var img = document.createElement("Img");
        img.src = asc;
        arrowUp.appendChild(img);
        arrowUp.className = "arrow";
        arrowDown = document.createElement("SPAN");
        arrowDown.style.display = "inline";
        img = document.createElement("Img");
        img.src = desc;
        arrowDown.appendChild(img);
        arrowDown.className = "arrow";
    }   
    function sortTable(tableNode, nCol, bDesc, sType) {   
        var tBody = tableNode.tBodies[0];
        var trs = tBody.rows;
        var trl= trs.length;
        var a = new Array();
        for (var i = 0; i < trl; i++) {   
            a[i] = trs[i];
        }   
        var start = new Date;
        window.status = "Sorting data...";
        a.sort(compareByColumn(nCol,bDesc,sType));
        window.status = "Sorting data done";
        for (var i = 0; i < trl; i++) {   
            tBody.appendChild(a[i]);
            window.status = "Updating row " + (i + 1) + " of " + trl +   
                " (Time spent: " + (new Date - start) + "ms)";
        }   
        // check for onsort   
        if (typeof tableNode.onsort == "string")   
            tableNode.onsort = new Function("", tableNode.onsort);
        if (typeof tableNode.onsort == "function")   
            tableNode.onsort();
    }   
    function CaseInsensitiveString(s) {   
        return String(s).toUpperCase();
    }   
    function parseDate(s) {   
        return Date.parse(s.replace(/\-/g, '/'));
    }   
    function toNumber(s) {   
        return Number(s.replace(/[^0-9\.]/g, ""));
    }   
    function Percent(s) {   
        return Number(s.replace("%", ""));
    }   
    function dostr(s){
    	return String(s).toUpperCase();
    }
    function donum(val){
		var s1 = "";
		var s2 = "";
		var s = val;
		try{
	    	if(val.indexOf("(")!=-1){
				s = val.substring(0, val.indexOf("("));
				s1 = val.substring(val.indexOf("(")+1, val.indexOf(")"));
			}
			if(s.indexOf("+")!=-1){
				s = s.substring(0,s.indexOf("+"));
			}
			if(s1 != "") {
				var splitChar = "";
				if(s1.indexOf("-")!=-1) splitChar = "-";
				else if(s1.indexOf("+")!=-1) splitChar = "+";
				else if(s1.indexOf("<")!=-1) splitChar = "<";
				else if(s1.indexOf(">")!=-1) splitChar = ">";
				if(splitChar!="") {
					s2 = s1.split(splitChar)[1];
					s1 = s1.split(splitChar)[0];
				}
			}
		}catch(e){}
		var rel = fillzero(s.Trim(),5)+fillzero(s1.Trim(),5)+fillzero(s2.Trim(),5);
		return rel;
    }
    function dobool(s)
    {
    	var val = 2;
    	if(s.toUpperCase() == "Y")
    		val = 0;
    	else if(s.toUpperCase() == "N")
    		val = 1;
    	return val;
    }
    function doboolfull(s)
    {
    	var val = 2;
    	if(s.toUpperCase() == "YES")
    		val = 1;
    	else if(s.toUpperCase() == "NO")
    		val = 0;
    	return val;
    }
    function dolastname(s){
    	if(s.indexOf(",")!=-1){
			s = s.substring(0,s.indexOf(","));
		}
		return CaseInsensitiveString(s);
    }
	function doip(s){
		var sArr = s.split(".");
		for(var i=0;i<sArr.length;i++)
		{
			if(sArr[i] == "*"){
				sArr[i] = "999";
			}else {
				sArr[i] = fillzero(sArr[i],3);
			}
		}
		return sArr.join(",");
    }
	function fillzero(s,num)
	{
		var n = s.length;
		while(n < num) {
			s = "0"+s;
			n++;
		}
		return s;
	} 
	function doStrNum(s)
	{	
		var nVal = 9999;
		var parrent = /^[0-9]*$/;
		if(s.length <= 0){
			nVal = -1;
		}
		if(s != "" && parrent.test(s)){
			nVal = parseInt(s);
		}
		return nVal;
	}
	function getFraudStatus(s)
	{
		if(s == "") return s;
		var ss3 = s.Trim().toLowerCase();
		if(s.Trim().length > 18){
			var ss2 = s.Trim().substring(18);
			//var ss1 = s.Trim().substring(0,18);
			if(ss2.indexOf("/")!=-1){
				if(s.indexOf("Fraud") == 0){
					ss3 = s.Trim().toLowerCase();
				}else {
					ss3 = ss2.substring(0,ss2.indexOf("/")-2).Trim().toLowerCase();
				}
				//ss1 = ss1.substring(5,10)+ss1.substring(0,5)+ss1.substring(10);				
			}			
			else {
				ss3 = ss2.Trim().toLowerCase();			
			}
		}
		if(ss3 == "fraud pending warning" || ss3 == "warning") ss3 = "0";
		else if(ss3 == "fraud pending watch" || ss3 == "watch") ss3 = "1";
		else if(ss3 == "fraud confirmed") ss3 = "2";
		s = ss3.Trim();
		return s;
	} 
	
	/**
	 */
	String.prototype.replaceAll = function(regExp, repText){
	  return this.replace(new RegExp(regExp,"g"),repText);
	}
	String.prototype.Trim = function() 
	{ 
		return this.replace(/(^\s*)|(\s*$)/g, ""); 
	} 
	function convertMonthStrToNumberStr(s){
		s = s.toLowerCase();
		if(s == "jan") s = "01";
		else if(s == "feb") s = "02";
		else if(s == "mar") s = "03";
		else if(s == "apr") s = "04";
		else if(s == "may") s = "05";
		else if(s == "jun") s = "06";
		else if(s == "jul") s = "07";
		else if(s == "aug") s = "08";
		else if(s == "sep") s = "09";
		else if(s == "oct") s = "10";
		else if(s == "nov") s = "11";
		else if(s == "dec") s = "12";
		return s;
	}
	//Formatter datetime is like "Apr 01, 2010 03:34 AM"
	function domyDate(s1)
	{
		var s = s1.Trim().replaceAll(",","");
		var dateArr = s.split(" ");
		if(dateArr.length >= 5){
			var year = dateArr[2];
			var month = convertMonthStrToNumberStr(dateArr[0]);
			var day = dateArr[1];
			var subday = dateArr[4].toLowerCase() == "pm"? 1 : 0;
			var time = dateArr[3];
			//var timeArr = time.split(":");
			//time = (timeArr[0] == "12" ? "00" : timeArr[0])+":"+timeArr[1];
			return year+month+day+subday+time;
		}
		return s1;
	}
    //Only sort support two column.
    function compareByColumn(nCol, bDescending, strType) {   
        var c = nCol;
        var d = bDescending;
        var typeArr = strType.split(",");
        
        var sType = typeArr[0];
        var fTypeCast = String;
        if (sType == "Number")   
            fTypeCast = Number;
        else if (sType == "Date")   
            fTypeCast = parseDate;
        else if (sType == "CaseInsensitiveString")   
            fTypeCast = CaseInsensitiveString;
        else if (sType == "Percent")   
            fTypeCast = Percent;
        else if(sType == "num")
        	fTypeCast = donum;
        else if(sType == "str")
        	fTypeCast = dostr;
        else if(sType == "bool")
        	fTypeCast = dobool;
		else if(sType == "lastname")
			fTypeCast = dolastname;
		else if(sType == "ip")
			fTypeCast = doip;
		else if(sType == "boolfull")
			fTypeCast = doboolfull;
		else if(sType == "StrNum")
			fTypeCast = doStrNum;
		else if(sType == "myDate")
			fTypeCast = domyDate;
		else if(sType == "fraudStatus")	
			fTypeCast = getFraudStatus;
        return function (n1, n2) {   
        	var str1 = getInnerText(n1.cells[c]);
			var str2 = getInnerText(n2.cells[c]);
			
			var chk = specialChecking(str1,str2);
			if(chk != 0)
			{
				return chk;
			}
			var value1 = fTypeCast(getInnerText(n1.cells[c]));
        	var value2 = fTypeCast(getInnerText(n2.cells[c]));
            if (value1 < value2)
                return d ? -1 : +1;
            if (value1 > value2)   
                return d ? +1 : -1;
            return 0;
            
        };
    }   
    function specialChecking(str1,str2)
	{
    	
		if(str1 == mydefinedChar && str2 != str1){
			return +1;
		}
		if(str2 == mydefinedChar && str2 != str1){
			return -1;
		}
		return 0;
	}
    function sortColumnWithHold(e) {   
        var el = ie5 ? e.srcElement : e.target;
        var table = getParent(el, "TABLE");
        var oldCursor = table.style.cursor;
        var oldClick = table.onclick;
        table.style.cursor = "wait";
        table.onclick = null;
        var fakeEvent = {srcElement : e.srcElement, target : e.target};
        window.setTimeout(function () {   
            sortColumn(fakeEvent);
            table.style.cursor = oldCursor;
            table.onclick = oldClick;
        }, 100);
    }
    function sortColumn(e) {
    	try{
    	var isSecondSortFlag = arguments[1]==undefined?false:arguments[1]; 
        var tmp = e.target ? e.target : (e.srcElement?e.srcElement:e);
        var tHeadParent = getParent(tmp, "THEAD");
        var el = getParent(tmp, "TH");
        if (tHeadParent == null) {
            return;
        }
        if (el != null && el.getAttribute("type") != undefined) {  
        	var sortedType = el.getAttribute("type");
        	var typeArr = sortedType.split(",");
        	if(typeArr.length > 1){
	        	try{
	            	var nextColumnIndex = parseInt(typeArr[1]);
	            	var tableObj = getParent(el, "TABLE");
	            	var cellObj = tableObj.rows[0].cells[nextColumnIndex];
	            	var descending = Boolean(cellObj._descending);	
	            	if(descending == false){
	            		sortColumn(cellObj,true);
	            	}
	        	}catch(e){
	        		 
	        	}
        	}
            var p = el.parentNode;
            var i;
            var tmpDescFlag = true;
            if(isSecondSortFlag == false){
            	tmpDescFlag = !Boolean(el._descending);
            	if(el._descending == null && el.getAttribute("_descending")!=undefined)
            	{
            		tmpDescFlag = (el.getAttribute("_descending") == "true");
            	}
            	el._descending = tmpDescFlag;
	            if (tHeadParent.arrow != null) {   
	                if (tHeadParent.arrow.parentNode != el) {   
	                    tHeadParent.arrow.parentNode._descending = null;
	                }   
	                tHeadParent.arrow.parentNode.removeChild(tHeadParent.arrow);
	            }   
	            if (el._descending)   
	                tHeadParent.arrow = arrowUp.cloneNode(true);
	            else  
	                tHeadParent.arrow = arrowDown.cloneNode(true);
	            el.appendChild(tHeadParent.arrow);
            }else{
            	el._descending = null;
            }
            var cells = p.cells;
            var l = cells.length;
            for (i = 0; i < l; i++) {   
                if (cells[i] == el) break;
            }   
            
            var table = getParent(el, "TABLE");
            sortTable(table,i,tmpDescFlag, el.getAttribute("type"));
        }  
    	}catch(e){};
    }   
    function getInnerText(el) {   
        if (ie5) return el.innerText; 
        var str = "";
        var cs = el.childNodes;
        var l = cs.length;
        for (var i = 0; i < l; i++) {   
            switch (cs[i].nodeType) {   
                case 1:    
                    str += getInnerText(cs[i]);
                    break;
                case 3:    
                    str += cs[i].nodeValue;
                    break;
            }   
        }   
        return str;
    }   
    function getParent(el, pTagName) {   
        if (el == null) return null;
        else if (el.nodeType == 1 && el.tagName.toLowerCase() == pTagName.toLowerCase())   
            return el;
        else  
            return getParent(el.parentNode, pTagName);
    }

 

 

朋友的网站 http://woods2010.cn.alibaba.com/ 专业电子器件代购

 

分享到：
| sql的一些操作命令
评论
1 楼 kly377 2014-10-21  
试了毫无反应...
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript Table排序

    5. **多列排序**：对于复杂的排序需求，如多列排序，我们需要记录当前的排序列和方向，并在点击新列时更新这些状态。同时，可能需要实现稳定的排序算法，以保持相同值的原始顺序。 6. **性能优化**：如果表格数据量...

    Div仿制table送自定义Scrollbar支持排序

    本主题"Div仿制table送自定义Scrollbar支持排序"正是探讨这种技术的应用。 首先，Div仿制table是通过CSS布局（如Flexbox或Grid）和JavaScript来构建一个看起来和表格类似的结构，这样可以更灵活地控制单元格的样式...

    Table排序

    "Table排序"主要是指对HTML `&lt;table&gt;`元素中的数据行依据某一列或多列进行升序或降序排列。在JavaScript中，我们可以直接操作DOM（Document Object Model）来实现这一功能。SortTable.js库通过监听用户的点击事件，...

    js-table-sorter(纯js实现点击表头排序)

    - **多列排序**：支持多列排序，可以通过多次点击不同的表头来切换排序依据。 - **自定义排序**：如果内置的排序规则不能满足需求，可以提供自定义排序函数，对特定列的数据进行特殊处理。 - **反馈视觉效果**：...

    很好用的javascript_table排序包含测试文件

    6. **多列排序**：如果需要支持多列排序，可以添加额外的逻辑来处理排序优先级。例如，可以保存一个排序顺序列表，当用户点击新的列时，将该列添加到列表头部，而其他列的顺序保持不变。 7. **自定义排序**：有时，...

    Javascript表格排序大全

    6. **多列排序**：复杂情况下，表格可能需要支持多列排序。在这种场景下，需要记录用户的排序选择，并按顺序应用每列的排序规则。 7. **自定义排序规则**：JavaScript的`sort()`函数默认按照字符串的字母顺序排序，...

    表格排序TableOrder

    1. **多列排序**：允许用户根据一列或多列的数据进行升序或降序排序。 2. **动态排序**：用户只需点击表头，即可实时更新表格的排序状态。 3. **自定义排序规则**：对于特定类型的列（如日期、数字、字符串），可以...

    JS 做的表格数据排序。。。。。。

    5. **多列排序**：高级的库可能支持多列排序，允许用户按多个字段排序，如先按年龄升序，再按名字降序。 6. **性能优化**：由于DOM操作可能会有性能影响，优秀的库会使用虚拟DOM或者最小化DOM操作次数来提升性能。 ...

    js 表格排序

    总结，"js 表格排序"涉及到的技术包括HTML表格结构、JavaScript事件处理、jQuery操作DOM、第三方库的使用（如Datatables）、自定义排序逻辑以及前端性能优化。通过学习和实践这些知识，开发者可以为ASP.NET应用构建...

    jsp页面表格排序 js文件

    6. **多列排序**：在描述中提到的“多列表格排序”意味着用户可以同时按照多个字段进行排序。实现这一功能需要维护一个排序优先级列表，每次点击列头时，根据当前的排序规则决定是添加新排序条件还是改变现有排序。 ...

    JS版表格排序实现点击表头即可排序

    在JavaScript（JS）中，实现表格排序功能是前端开发中常见的需求，特别是在处理大量数据时。这个功能使得用户可以通过点击表头对数据进行升序或降序排列，提高数据查看和分析的效率。下面我们将详细探讨如何实现这样...

    table 列可左右拖动

    "table 列可左右拖动"的功能使得用户可以根据需要调整列宽，提高用户体验，特别是当表格内容较多，需要横向滚动条时，用户可以更方便地查看和操作表格。 实现这一功能通常涉及以下几个关键知识点： 1. **...

    vue Element ui实现table列拖动效果

    需要注意的是，实际项目中可能需要考虑更多细节，例如防止多次拖动操作导致的数据混乱，以及兼容不同浏览器的差异。此外，为保持良好的用户体验，可能还需要添加过渡动画和拖动指示器等。通过以上的实现方式，你可以...

    sorttable拖拽排序

    sorttable库支持自定义排序函数，这意味着你可以根据具体的数据类型和业务需求来定制排序规则。例如，对于日期、货币或包含特殊格式的文本，可以通过注册新的比较函数来确保正确的排序顺序。 **5. 兼容性和性能** ...

    表格排序

    `tablesort.js` 库允许开发者通过添加一些自定义属性或类来扩展HTML表格的功能，使得用户可以按任意列进行排序，甚至支持自定义排序规则。例如，我们可以为表头单元格添加`data-sort`属性来指定排序依据，或者使用`...

    表格排序插件jquery.tableSort.js

    1. **多列排序**：jquery.tableSort.js支持多列同时排序，用户可以通过点击不同的表头实现对多个字段的排序。 2. **自动检测数据类型**：插件会自动识别表格单元格中的数据类型（如数字、日期、字符串等），并根据...

    JS:表格排序

    为了提高代码的可复用性和适应性，可以封装成一个插件或组件，支持自定义排序逻辑和兼容各种浏览器。同时，考虑使用ES6的类和模块化来提升代码组织性。 通过以上介绍，你已经了解了JS中实现表格排序的基本思路和...

    javascript 实现简单的table排序及table操作练习

    通过理解表格元素的特性和JavaScript对DOM的操作，可以实现更复杂的表格功能，例如多列排序、自定义排序规则等。对于初学者来说，这是一个很好的实践项目，能够帮助理解HTML与JavaScript的交互以及DOM操作的原理。

Magicbox
Global site tag (gtag.js) - Google Analytics