javascript表格前端排序表格前端按列排序
依赖jQuery(本例使⽤jQuery-1.8.2)
1.初始化⽅法
(function($){
//插件
$.extend($,{
//命名空间
sortTable:{
sort:function(tableId,Idx){
var table = ElementById(tableId);
var tbody = table.tBodies[0];
var tr = ws;
var trValue = new Array();
for (var i=0; i<tr.length; i++ ) {
trValue[i] = tr[i];  //将表格中各⾏的信息存储在新建的数组中
}
if (tbody.sortCol == Idx) {
} else {
trValue.sort(function(tr1, tr2){
var value1 = lls[Idx].innerText; //列
var value2 = lls[Idx].innerText; //第⼆列
value1 = place("%",""); //把有%的取消掉
im(); //去空格
console.log(typeof(value1));
if(isNaN(value1)){
var index1 = value1.indexOf("分");
var index2 = value2.indexOf("分");
if(index1>0){
var num1 =value1.substring(0,index1);
var num2 =value1.substring(index1+1,value1.length-1);
var num3 =value2.substring(0,index2);
var num4 =value2.substring(index2+1,value2.length-1);
if(parseFloat(num1)>parseFloat(num3)){
return 1;
}
if(parseFloat(num1)<parseFloat(num3)){
return -1;
}
if(parseFloat(num1)==parseFloat(num3)){
return parseFloat(num2)-parseFloat(num4)
}
}else{
var a = lls[Idx].textContent;
var  b= lls[Idx].textContent;
return a.localeCompare(b);
}
}else{
return parseFloat(value1)-parseFloat(value2);
}
});
}
var fragment = ateDocumentFragment();  //新建⼀个代码⽚段，⽤于保存排序后的结果    //var index = 0;
javascript属于前端吗
var arrtotal =new Array();
for (var i=0; i<trValue.length; i++ ) {
var c = trValue[i].cells[0].innerHTML;
//console.log(c);
im().indexOf("汇总")!=-1){//汇总⾏总是排在表格最上⾯
// index = i;
arrtotal.push(i);
}else{
fragment.appendChild(trValue[i]);
}
}
if(arrtotal.length>0){
for(var k=arrtotal.length; k<0; k-- ){
tbody.appendChild(trValue[arrtotal[k]]);
}
}
//tbody.appendChild(trValue[index]);
tbody.appendChild(fragment); //将排序的结果替换掉之前的值
tbody.sortCol = Idx;
}
}
});
})(jQuery);
2.页⾯函数
function desc_change(id,str){
$("#desc_1").html("⽇期");
$("#desc_2").html("ID");
$("#desc_3").html("类别");
$("#"+id).html(str);
}
function desc(id,str){
var htmlstr =$("#"+id).text().trim();
var c =str;
if(htmlstr==str){
c=str+'↓';
$("#"+id).html(c);
}else if(htmlstr==str+'↓'){
c=str+'↑'
$("#"+id).html(c);
}else if(htmlstr==str+'↑'){
c=str+'↓'
$("#"+id).html(c);
}
desc_change(id,c)
}
4.DOM结构
<table id="tableSort">
<thead>
<tr>
<th οnclick="$.sortTable.sort('tableSort',0);desc('desc_1','⽇期')" ><a id="desc_1" >⽇期</a></th>              <th οnclick="$.sortTable.sort('tableSort',1);desc('desc_2','软件ID')" ><a id="desc_2" >ID</a></th>        <th οnclick="$.sortTable.sort('tableSort',2);desc('desc_x','渠道ID')" ><a id="desc_3" >类别</a></th>  </tr>
</thead>
<tbody>
<tr>
<td>201870601</td>
<td>汇总</td>
<td>新闻</td>
</tr>
</tbody>
</table>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。