JS实现table表格数据排序(可支持动态数据+分页效果)

asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序.

数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点.

下面把html的代码贴出来:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HEAD><TITLE>js操作刷新</TITLE>

</HEAD>

//--------------------- 排序

//需要在排序的table上加id="tableNeed",需在排序的列上加onclick="sortt('.?')",在此列所有<td>上加class="?"

function sortt(className){

var listName=new Array();

var listNameOld=new Array();

var listTr=new Array();

var listSort=new Array();

var i=1;

var b=false;

//取得原来的<tr>,并清空<table>

$("#tableNeed tr").each(function(){

listTr.push($(this).html());

});

//得到要排列的列的元素，并在末尾追加此刻的顺序（从1开始）

$(className).each(function(){

listName.push($(this).text()+i);

listNameOld.push($(this).text()+i);

i++;

});

//将要排序的元素排序

mySort(listName);

//判断排序后元素位置是否发生变化

for(var j=0;j<listName.length;j++){

if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){

b=true;

break;

}

//排序后，根据先前追加的顺序得到此时<tr>的顺序

for(var j=0;j<listName.length;j++){

listSort.push(parseInt(listName[j].substring(listName[j].length-1)));

}

$("#tableNeed").html('');

//按顺序追加<tr>，若排序后元素顺序未变化，则倒序追加

$("#tableNeed").append("<tr class='header'>"+listTr[0]+"</tr>");

if(b){

for(var j=0;j<listSort.length;j++){

$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");

}

}else{

for(var j=listSort.length-1;j>=0;j--){

$("#tableNeed").append("<tr>"+listTr[listSort[j]]+"</tr>");

}

//首先按字符个数排序，然后按相对应的字符大小排序

function mySort(list){

var len=0;

var add="";

for(var i=0;i<list.length;i++){

var str=list[i];

if(str.length>len){

len=str.length;

}

for(var i=0;i<len;i++){

add+="0"

}

for(var i=0;i<list.length;i++){

var strOne=add+list[i];

list[i]=strOne.substring(strOne.length-len);

}

list.sort();

}

//----------------------------

</SCRIPT>

<BODY>

<tr><td onclick="sortt('.1')">数字</td><td onclick="sortt('.2')">字母</td><td onclick="sortt('.3')">数字和字母</td></tr>

</TABLE>

</BODY></HTML>

posted on 2011-11-03 10:48 Sampson 阅读(8449) 评论(1) 编辑收藏举报