jsp+js实现可排序表格.docx

jsp+js实现可排序表格.docx

《jsp+js实现可排序表格.docx》由会员分享，可在线阅读，更多相关《jsp+js实现可排序表格.docx（10页珍藏版）》请在冰点文库上搜索。

jsp+js实现可排序表格

jsp+js实现可排序表格

首先，定义一个js:

tableSort.js:

functionsort（tableId,sortColumn,nodeType）{

vartable=document.getElementById（";theTable";）;

vartableBody=table.tBodies[0];

vartableRows=tableBody.rows;

varrowArray=newArray（）;

for（vari=0;i<;tableRows.length;i++）{

rowArray[i]=tableRows[i];

}

if（table.sortColumn==sortColumn）{

rowArray.reverse（）;

}else{

rowArray.sort（generateCompareTR（sortColumn,nodeType））;

}

vartbodyFragment=document.createDocumentFragment（）;

for（vari=0;i<;rowArray.length;i++）{

tbodyFragment.appendChild（rowArray[i]）;

}

tableBody.appendChild（tbodyFragment）;

table.sortColumn=sortColumn;

}

functiongenerateCompareTR（sortColumn,nodeType）{

returnfunctioncompareTR（trLeft,trRight）{

varleftValue=convert（trLeft.cells[sortColumn].firstChild.nodeValue,

nodeType）;

varrightValue=convert（trRight.cells[sortColumn].firstChild.nodeValue,

nodeType）;

if（leftValue<;rightValue）{

return-1;

}else{

if（leftValue>;rightValue）{

return1;

}else{

return0;

}

}

};

}

functionconvert（value,dataType）{

switch（dataType）{

case";int";:

returnparseInt（value）;

case";float";:

returnparseFloat（value）;

case";date";:

returnnewDate（Date.parse（value））;

default:

returnvalue.toString（）;

}

}

然后是使用:

<;%@pagelanguage=";java";import=";java.util.*";pageEncoding=";UTF-8";%>;<;%

Stringpath=request.getContextPath（）;

StringbasePath=request.getScheme（）+";:

//";

+request.getServerName（）+";:

";+request.getServerPort（）

+path+";/";;

%>;

<;!

DOCTYPEHTMLPUBLIC";-//W3C//DTDHTML4.01Transitional//EN";>;<;html>;

<;head>;

<;basehref=";<;%=basePath%>;";>;

<;title>;MyJSP'tabel.jsp'startingpage<;/title>;

<;metahttp-equiv=";pragma";content=";no-cache";>;

<;metahttp-equiv=";cache-control";content=";no-cache";>;

<;metahttp-equiv=";expires";content=";0";>;

<;metahttp-equiv=";keywords";content=";keyword1,keyword2,keyword3";>;

<;metahttp-equiv=";description";content=";Thisismypage";>;

<;!

--

<;linkrel=";stylesheet";type=";text/css";href=";styles.css";>;

-->;

<;scripttype=";text/javascript";

src=";userjs/tableSort.js";>;<;/script>;

<;/head>;

<;body>;

<;tableid=";theTable";align=";center";border=";1";>;

<;thead>;

<;tr>;

<;td>;

标题1

<;/td>;

<;tdonclick=";sort（theTable,1,'int'）";>;

标题2

<;/td>;

<;tdonclick=";sort（theTable,2,'int'）";>;

标题3

<;/td>;

<;tdonclick=";sort（theTable,3,'int'）";>;

标题4

<;/td>;

<;tdonclick=";sort（theTable,4,'int'）";>;

标题5

<;/td>;

<;tdonclick=";sort（theTable,5,'int'）";>;

标题6

<;/td>;

<;tdonclick=";sort（theTable,6,'int'）";>;

标题7

<;/td>;

<;/tr>;

<;/thead>;

<;tbody>;

<;tr>;

<;td>;

1

<;/td>;

<;td>;

2

<;/td>;

<;td>;

3

<;/td>;

<;td>;

4

<;/td>;

<;td>;

5

<;/td>;

<;td>;

6

<;/td>;

<;td>;

7

<;/td>;

<;/tr>;

<;tr>;

<;td>;

2

<;/td>;

<;td>;

3

<;/td>;

<;td>;

4

<;/td>;

<;td>;

5

<;/td>;

<;td>;

6

<;/td>;

<;td>;

7

<;/td>;

<;td>;

1

<;/td>;

<;/tr>;

<;tr>;

<;td>;

3

<;/td>;

<;td>;

4

<;/td>;

<;td>;

5

<;/td>;

<;td>;

6

<;/td>;

<;td>;

7

<;/td>;

<;td>;

1

<;/td>;

<;td>;

2

<;/td>;

<;/tr>;

<;tr>;

<;td>;

4

<;/td>;

<;td>;

5

<;/td>;

<;td>;

6

<;/td>;

<;td>;

7

<;/td>;

<;td>;

1

<;/td>;

<;td>;

2

<;/td>;

<;td>;

3

<;/td>;

<;/tr>;

<;tr>;

<;td>;

5

<;/td>;

<;td>;

6

<;/td>;

<;td>;

7

<;/td>;

<;td>;

1

<;/td>;

<;td>;

2

<;/td>;

<;td>;

3

<;/td>;

<;td>;

4

<;/td>;

<;/tr>;

<;tr>;

<;td>;

6

<;/td>;

<;td>;

7

<;/td>;

<;td>;

1

<;/td>;

<;td>;

2

<;/td>;

<;td>;

3

<;/td>;

<;td>;

4

<;/td>;

<;td>;

5

<;/td>;

<;/tr>;

<;/tbody>;

<;/table>;

<;/body>;

<;/html>;

之后就可以看到效果了。