table表格排序，JavaScript自带排序功能，点击表头实现升序降序，非常方便

冷不防 2022-05-15 07:57 287阅读 0赞

首先编写js文件，源码如下。我在这里命名为：script.js   （如修改，在页面引用文件也要与之相同）

var TINY={};
    
    function T$(i){return document.getElementById(i)}
    function T$$(e,p){return p.getElementsByTagName(e)}
    
    TINY.table=function(){
    	function sorter(n){this.n=n; this.pagesize=20; this.paginate=0}
    	sorter.prototype.init=function(e,f){
    		var t=ge(e), i=0; this.e=e; this.l=t.r.length; t.a=[];
    		t.h=T$$('thead',T$(e))[0].rows[0]; t.w=t.h.cells.length;
    		for(i;i<t.w;i++){
    			var c=t.h.cells[i];
    			if(c.className!='nosort'){
    				c.className=this.head; c.onclick=new Function(this.n+'.wk(this.cellIndex)')
    			}
    		}
    		for(i=0;i<this.l;i++){t.a[i]={}}
    		if(f!=null){var a=new Function(this.n+'.wk('+f+')'); a()}
    		if(this.paginate){this.g=1; this.pages()}
    	};
    	sorter.prototype.wk=function(y){
    		var t=ge(this.e), x=t.h.cells[y], i=0;
    		for(i;i<this.l;i++){
          t.a[i].o=i; var v=t.r[i].cells[y]; t.r[i].style.display='';
          while(v.hasChildNodes()){v=v.firstChild}
          t.a[i].v=v.nodeValue?v.nodeValue:''
        }
    		for(i=0;i<t.w;i++){var c=t.h.cells[i]; if(c.className!='nosort'){c.className=this.head}}
    		if(t.p==y){t.a.reverse(); x.className=t.d?this.asc:this.desc; t.d=t.d?0:1}
    		else{t.p=y; t.a.sort(cp); t.d=0; x.className=this.asc}
    		var n=document.createElement('tbody');
    		for(i=0;i<this.l;i++){
    			var r=t.r[t.a[i].o].cloneNode(true); n.appendChild(r);
    			r.className=i%2==0?this.even:this.odd; var cells=T$$('td',r);
    			for(var z=0;z<t.w;z++){cells[z].className=y==z?i%2==0?this.evensel:this.oddsel:''}
    		}
    		t.replaceChild(n,t.b); if(this.paginate){this.size(this.pagesize)}
    	};
    	sorter.prototype.page=function(s){
    		var t=ge(this.e), i=0, l=s+parseInt(this.pagesize);
    		if(this.currentid&&this.limitid){T$(this.currentid).innerHTML=this.g}
    		for(i;i<this.l;i++){t.r[i].style.display=i>=s&&i<l?'':'none'}
    	};
    	sorter.prototype.move=function(d,m){
    		var s=d==1?(m?this.d:this.g+1):(m?1:this.g-1);
    		if(s<=this.d&&s>0){this.g=s; this.page((s-1)*this.pagesize)}
    	};
    	sorter.prototype.size=function(s){
    		this.pagesize=s; this.g=1; this.pages(); this.page(0);
    		if(this.currentid&&this.limitid){T$(this.limitid).innerHTML=this.d}
    	};
    	sorter.prototype.pages=function(){this.d=Math.ceil(this.l/this.pagesize)};
    	function ge(e){var t=T$(e); t.b=T$$('tbody',t)[0]; t.r=t.b.rows; return t};
    	function cp(f,c){
    		var g,h; f=g=f.v.toLowerCase(), c=h=c.v.toLowerCase();
    		var i=parseFloat(f.replace(/(\$|\,)/g,'')), n=parseFloat(c.replace(/(\$|\,)/g,''));
    		if(!isNaN(i)&&!isNaN(n)){g=i,h=n}
    		i=Date.parse(f); n=Date.parse(c);
    		if(!isNaN(i)&&!isNaN(n)){g=i; h=n}
    		return g>h?1:(g<h?-1:0)
    	};
    	return{sorter:sorter}
    }();

html页面源码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JavaScript排序</title>
    
    
    </head>
    <body>
    
    	<table cellpadding="0" cellspacing="0" border="1" id="table" style="margin: auto;width: 80%;text-align: center;">
    		<thead>
    			<tr>
    				<th class="nosort"><h3>编号</h3></th>
    				<th><h3>姓名</h3></th>
    				<th><h3>年龄</h3></th>
    				<th><h3>手机号</h3></th>
    				<th><h3>QQ号</h3></th>
    				<th><h3>Email</h3></th>
    				<th><h3>分数</h3></th>
    			</tr>
    		</thead>
    		<tbody>
    			<tr>
    				<td>1</td>
    				<td>xihaibin</td>
    				<td>23</td>
    				<td>17,612,347,894</td>
    				<td>58962475</td>
    				<td><a href="mailto:#">tordstor@163.cx</a></td>
    				<td>100</td>
    			</tr>
    			<tr>
    				<td>2</td>
    				<td>liubei</td>
    				<td>39</td>
    				<td>12312,347,894</td>
    				<td>456454555</td>
    				<td><a href="mailto:#">adfdfgfgr@est.ca</a></td>
    				<td>88</td>
    			</tr>
    			<tr>
    				<td>3</td>
    				<td>guanyu</td>
    				<td>79</td>
    				<td>,894</td>
    				<td>19956455</td>
    				<td><a href="mailto:#">dhrerer@est.ca</a></td>
    				<td>98</td>
    			</tr>
    			<tr>
    				<td>4</td>
    				<td>zhaozhilong</td>
    				<td>46</td>
    				<td>13432347894</td>
    				<td>45456455</td>
    				<td><a href="mailto:#">rtytrrty@est.ca</a></td>
    				<td>38</td>
    			</tr>
    			<tr>
    				<td>5</td>
    				<td>diaocan</td>
    				<td>20</td>
    				<td>0</td>
    				<td>87987545</td>
    				<td><a href="mailto:#">sadfdasf@est.ca</a></td>
    				<td>68</td>
    			</tr>
    		</tbody>
      </table>
    
    	
    <script type="text/javascript" src="script.js"></script>
    <script type="text/javascript">
    var sorter = new TINY.table.sorter("sorter");
    sorter.head = "head";
    sorter.asc = "asc";
    sorter.desc = "desc";
    sorter.even = "evenrow";
    sorter.odd = "oddrow";
    sorter.evensel = "evenselected";
    sorter.oddsel = "oddselected";
    sorter.paginate = true;
    sorter.currentid = "currentpage";
    sorter.limitid = "pagelimit";
    sorter.init("table",1);
    </script>
    
    </body>
    </html>

运行即可看到效果。点击表格可以切换降序和倒序。

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 java数组排序，升序和降序

文章目录前言基本数据类型排序升序降序排列基本数据类型包装类升序降序对象排序

朱雀/ 2023年09月24日 19:42/ 0 赞/ 149 阅读

相关前端实现列表排序 (时间名称升序降序)

function pcompare(prop,rev) { // 第二个参数没有传递，默认升序排序 i

r囧r小猫/ 2022年11月21日 04:22/ 0 赞/ 308 阅读

相关 stream sorted进行降序排序升序降序

[https://blog.csdn.net/banjw\_129/article/details/83585135][https_blog.csdn.net_banjw_12

以你之姓@/ 2022年11月07日 00:54/ 0 赞/ 400 阅读

相关 js实现表格table的升序降序功能

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

阳光穿透心脏的1/2处/ 2022年07月14日 10:38/ 0 赞/ 252 阅读

相关冒泡排序实现升序和降序排列

1.升序排列 public static void main(String[] args) { int[] arr = {

墨蓝/ 2022年06月14日 01:55/ 0 赞/ 218 阅读

相关 mapreduce，自定义排序，分区，分组实现按照年份升序排序，温度降序排序

自定义类： package myhadoop; import java.io.DataInput; import java.io.DataO

ゝ一世哀愁。/ 2022年06月13日 05:23/ 0 赞/ 182 阅读

相关 mapreduce，自定义排序，分区，分组实现按照年份升序排序，温度降序排序

自定义类： 1. `package myhadoop;` 2. 3. `import java.io.DataInput;` 4. `impo

末蓝、/ 2022年05月20日 10:28/ 0 赞/ 206 阅读

相关 table表格排序，JavaScript自带排序功能，点击表头实现升序降序，非常方便

首先编写js文件，源码如下。我在这里命名为：script.js （如修改，在页面引用文件也要与之相同） var TINY={}; fun

冷不防/ 2022年05月15日 07:57/ 0 赞/ 288 阅读

相关 react-redux实现升序降序排序

action.js 下面代码中的patientList是一个数据数组，比较patientList数组中的sirenId，然后patientList这一行数据也排序

女爷i/ 2022年04月13日 04:14/ 0 赞/ 381 阅读

相关堆排序（包括升序和降序，Arraylist 实现）

补充上一篇利用Arraylist实现的堆排序(包含升序和降序) import java.util.ArrayList; import java.util

怼烎@/ 2021年09月23日 03:18/ 0 赞/ 340 阅读