在web前端开发中会遇到排序等功能,当然也可以用服务器端来排序,今天我做一个笔记,怎么用js来实现这些复杂的功能呢。

 

在学习这个之前一定得用html dom jquery 的知识,要不没有办法看明白的,当然也不包括你是一个天才了。哈哈!

 

好了,先说一下思路,这里说一下,在学习一个js特效的时候思路很重要,可以说你不用对js多么的精通,但是一个功能放在你的面前,你必须有个很清晰的思路,这样做起来就很容易了,就算是再困难的特效也不例外!

 

一共有四个步骤:首先要给触发排序的控件添加事件,这里我就略过了。

 

1.把要排序的内容添加到数组里

 

  1. var tIndex=parseInt($(this).index());

  2. var valueArray=new Array();

  3. var p=0;

  4. for(var i=1; i<$("table tr").length; i++){

  5.  

  6. if(tIndex!=0){

  7. valueArray[p]=parseInt($("table tr:eq("+i+") td").eq(tIndex).html());

  8. }else{

  9. valueArray[p]=$("table tr:eq("+i+") td").eq(tIndex).html();

  10. }

  11.  

  12. p++;

  13.  

  14. }

 

2.数据排序

 

 

  1. //数据排序

  2. if(pk==1){

  3. valueArray.sort(function(a,b){ return a

  4. pk=2

  5. }else{

  6. valueArray.sort(function(a,b){ return a>b ? -1:1})

  7. pk=1

  8. }

 


3.匹配内容 加入到一个隐藏的排序div里

  1. for(var i=0; i

  2. for(var d=1; d<$("table tr").length; d++){

  3. var valueText= tIndex!=0 ? parseInt($("table tr:eq("+d+") td").eq(tIndex).html()):$("table tr:eq("+d+") td").eq(tIndex).html();

  4. if(valueArray[i]==valueText){

  5. $("table tr").eq(d).clone().appendTo(".none")

  6. }

  7. }

  8.  

  9. }

 


4.重新整理html 排序,添加到视图里


  1. var titleClone=$("table tr").eq(0).clone(true);

  2. $("table").html("").append(titleClone);

  3.  

  4. $("table").append($(".none").html())

  5.  

  6. $(".none").html("");

 

通过这四个步骤就可以实现你要js排序的功能了,是不是很简单呢,也可以通过这个例子举一反三。这得看大家的想象力了。



 













































姓名 年龄 出生年 分数
李百(L) 15 1988 99
王易(W) 25 2000 150
林明(L) 18 1745 120
李姐(L) 20 1996 130

 


特效出自:kevn-web前段开发


 

稳定

产品高可用性高并发

贴心

项目群及时沟通

专业

产品经理1v1支持

快速

MVP模式小步快跑

承诺

我们选择声誉

坚持

10年专注高端品质开发
  • 返回顶部