快捷導(dǎo)航

JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果)

更新時(shí)間：2016年05月26日 16:58:38 作者：Sampson

這篇文章主要介紹了JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果) 的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起看看吧

asp.net會(huì)經(jīng)常遇到分頁(yè)的效果,尤其是希望實(shí)現(xiàn)靜態(tài)的html分頁(yè)排序(html分頁(yè)相信大家都已經(jīng)有自己的解決方案.在這里就不多說(shuō)).我寫了一個(gè)簡(jiǎn)單的Demo排序.

數(shù)據(jù)就是字母和數(shù)字兩組.(漢字需要找到asc碼) 原理就是利用數(shù)組自帶的sort排序,進(jìn)行表格重組.已在.net mvc 中測(cè)試過(guò).支持分頁(yè).(申明一點(diǎn).只對(duì)當(dāng)前頁(yè)面數(shù)據(jù)排序無(wú)刷新,對(duì)所有頁(yè)面排序的話,肯定需要刷新.這點(diǎn)我還在解決中.)希望有新想法的高手們,給下指點(diǎn).

下面把html的代碼貼出來(lái):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns="http://www.w3.org/1999/xhtml">
<HEAD><TITLE>js操作刷新</TITLE>
<META http-equiv=Content-Type content="text/html; charset=utf-8" ;>
<script language="javaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
</HEAD>
<SCRIPT>
//--------------------- 排序
//需要在排序的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;
//取得原來(lái)的<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);
//判斷排序后元素位置是否發(fā)生變化
for(var j=0;j<listName.length;j++){
if(listName[j].substring(listName[j].length-listNameOld[j].length)!=listNameOld[j]){
b=true;
break;
}
}
//排序后，根據(jù)先前追加的順序得到此時(shí)<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>");
}
}
}
//首先按字符個(gè)數(shù)排序，然后按相對(duì)應(yīng)的字符大小排序
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>
<TABLE id="tableNeed" border=1>
<tr><td onclick="sortt('.1')">數(shù)字</td><td onclick="sortt('.2')">字母</td><td onclick="sortt('.3')">數(shù)字和字母</td></tr>
<tr><td class="1">11</td><td class="2">ee</td><td class="3">1a</td></tr>
<tr><td class="1">22</td><td class="2">gg</td><td class="3">7g</td></tr>
<tr><td class="1">33</td><td class="2">cc</td><td class="3">d4</td></tr>
<tr><td class="1">44</td><td class="2">aa</td><td class="3">3c</td></tr>
<tr><td class="1">55</td><td class="2">dd</td><td class="3">e5</td></tr>
<tr><td class="1">66</td><td class="2">ff</td><td class="3">f6</td></tr>
<tr><td class="1">77</td><td class="2">hh</td><td class="3">2b</td></tr>
<tr><td class="1">88</td><td class="2">bb</td><td class="3">h8</td></tr>
</TABLE>
</BODY></HTML>

以上所述是小編給大家介紹的JS實(shí)現(xiàn)table表格數(shù)據(jù)排序功能(可支持動(dòng)態(tài)數(shù)據(jù)+分頁(yè)效果) ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: