用js实现table排序

关于js实现table排序的问题！

问题描述：

           或许大家都碰到过这样一个问题，从数据库中得到一系列的数据，显示在页面上，有时候根据客服的要求我们需要对显示出来的数据进行实时排序（有n行n列，当点击其中一行头的时候所用数据按此列升序或者降序排列），当然从数据库中去数据然后进行排无愧是其中一个办法，但是试想一下，每次排序都要进行数据库查询，不但加重了服务器端的负担，响应时间也变的 相对缓慢。为此使用javascript解决无疑是中很好的方法

解决办法及源码：

        排序js

 1.   sort.js

 

/**/ /**
 * table排序
 * anthor liueh
 */
function    JM_PowerList(colNum)   
   ... {   
  headEventObject=event.srcElement;//取得引发事件的对象   
  while(headEventObject.tagName!="TR")   //不是tr行,则从底下的td冒泡上来寻找到相应行   
  ...{   
  headEventObject=headEventObject.parentElement;   
  }   
    
  for   (i=0;i<headEventObject.children.length;i++)   
  ...{   
  if   (headEventObject.children[i]!=event.srcElement)//找到事件发生的td单元格   
  ...{   
  headEventObject.children[i].className='listTableHead';//把点击的列的className属性设为listTableHead   
  }   
  }   
    
  var   tableRows=0;   
  trObject=clearStart.children[0].children;   //取得表格中行对象,   原来这里叫DataTable,   可能是你写错了吧??   
  for   (i=0;i<trObject.length;i++)   
  ...{   
  Object=clearStart.children[0].children[i];//取得每行的对象   
  tableRows=(trObject[i].id=='ignore')?tableRows:tableRows+1;//如果不是忽略行,则行数加一   
  }   
    
  var   trinnerHTML=new   Array(tableRows);     
  var   tdinnerHTML=new   Array(tableRows);   
  var   tdNumber=new   Array(tableRows)   
  var   i0=0   
  var   i1=0   
  for   (i=0;i<trObject.length;i++)   
  ...{   
  if   (trObject[i].id!='ignore')   
  ...{   
  trinnerHTML[i0]=trObject[i].innerHTML;//把行放在数组里   
  tdinnerHTML[i0]=trObject[i].children[colNum].innerHTML;//把要排序的行中td的内容放数组里   
  tdNumber[i0]=i;//行号   
  i0++;//加一,下个循环用   
  }   
  }   
  sourceHTML=clearStart.children[0].outerHTML;//取得表格中所有tr的html代码   
    
  //对所有td中的字符串进行排序,   算不算冒泡排序???   
  for   (bi=0;bi<tableRows;bi++)   
  ...{   
  for   (i=0;i<tableRows;i++)   
  ...{   
  if(tdinnerHTML[i]>tdinnerHTML[i+1])   
  ...{   
  t_s=tdNumber[i+1];   
  t_b=tdNumber[i];   
  tdNumber[i+1]=t_b;   
  tdNumber[i]=t_s;   
  temp_small=tdinnerHTML[i+1];   
  temp_big=tdinnerHTML[i];   
  tdinnerHTML[i+1]=temp_big;   
  tdinnerHTML[i]=temp_small;   
  }   
  }   
  }   
    
    
    
  var   showshow='';   
  var   numshow='';   
  for   (i=0;i<tableRows;i++)   
  ...{   
  showshow=showshow+tdinnerHTML[i]+' ';//把排序好的td的内容存在showshow字串里   
  numshow=numshow+tdNumber[i]+'|';             //把排序好的相应的行号也存在numshow中   
  }   
    
  sourceHTML_head=sourceHTML.split("<TBODY>");//从<TBODY>截断,我试了,前头串为空   
    
  numshow=numshow.split("|");   
  var   trRebuildHTML='';   
  if   (event.srcElement.className=='listHeadClicked')   
  ...{//已点击的列,   则逆排   
  for   (i=0;i<tableRows;i++)   
  ...{   
  trRebuildHTML=trRebuildHTML+trObject[numshow[tableRows-1-i]].outerHTML;//取出排序好的tr的内容连接起来   
    
  }   
  event.srcElement.className='listHeadClicked0';   
  }   
  else   
  ...{//默认顺排,新点击顺排   
  for   (i=0;i<tableRows;i++)   
  ...{   
  trRebuildHTML=trRebuildHTML+trObject[numshow[i]].outerHTML;   
  }   
  event.srcElement.className='listHeadClicked';   
  }   
  //取得排序后的tr集合结果字符串   
  var   DataRebuildTable='';   
  //把旧的表格头和新的tr排序好的元素连接起来,   (修改了一下)   
  DataRebuildTable   =   "<table   border=1 width=100%  cellpadding=1 cellspacing=1 id='clearStart'><TBODY>"   +   trObject[0].outerHTML   +   trRebuildHTML   +   "</TBODY>"   +     
    
  "</table>";   
  clearStart.outerHTML=DataRebuildTable;//表格用新串重新写一次   
    
  }    

 

 

2.网页文件

 

< head >
     < title > MyHtml.html </ title >
 
     < meta  http-equiv ="keywords"  content ="keyword1,keyword2,keyword3" >
     < meta  http-equiv ="description"  content ="this is my page" >
     < meta  http-equiv ="content-type"  content ="text/html; charset=UTF-8" >
    
     <!-- <link rel="stylesheet" type="text/css" href="./styles.css"> -->

    < script  src ="sort.js"  language ="javascript" ></ script >

   </ head >
< table  border =1  id ="clearStart" >
  < tr  bgcolor =cccccc  id ='ignore' >
   < td  onclick ="JM_PowerList(0)" > 列一
   </ td >
   < td  onclick ="JM_PowerList(1)" >
   列二
   </ td >
   < td  onclick ="JM_PowerList(2)" >
   列二
   </ td >
  </ tr >
   < tr >
   < td >
   周
   </ td >
   < td >
   公务员
   </ td >
   < td >
   22
   </ td >
  </ tr >
  < tr >
   < td >
   张三
   </ td >
   < td >
   研究员
   </ td >
   < td >
   65
   </ td >
  </ tr >
  < tr >
   < td >
   李思
   </ td >
   < td >
   科学家
   </ td >
   < td >
   24
   </ td >
  </ tr >
  < tr >
   < td >
  王武
   </ td >
   < td >
   社会学家
   </ td >
   < td >
   38
   </ td >
  </ tr >
</ table >

3,sort.js和网页文件需放在同级目录下

4.完成