2014-02-25 1 views
1

플러그인없이 테이블 행을 정렬하려고합니다. 불행히도 플러그인을 사용할 수있는 옵션이 없습니다. 자, 여기 내가 지금까지 시도 내용은 다음과 같습니다jQuery를 사용하여 테이블 행을 정렬하는 동안 빈 셀을 무시합니다.

var info = $('#project_table tr.punch_list_summary'); 
    //For Closed Date 
    $(document).on('click', '#descending_closed_date', function(e) { 
     e.preventDefault(); 
     var sortDir = -1; 
     info.sort(function(a, b) { 
      if ($(a).attr('data-closeddate') === 'null') { 
       if ($(b).attr('data-closeddate') === 'null') { 
        return false; 
       } 
       return true; 
      } 
      a = new Date($(a).attr('data-closeddate')); 
      b = new Date($(b).attr('data-closeddate')); 
      return (a - b) * sortDir; 
     }); 
     $('#project_table').html(info); 
     sortDir = 1; 
    }); 

    $(document).on('click', '#ascending_closed_date', function(e) { 
     e.preventDefault(); 
     var sortDir = 1; 
     info.sort(function(a, b) { 
      if ($(a).attr('data-closeddate') === 'null') { 
       if ($(b).attr('data-closeddate') === 'null') { 
        return false; 
       } 
       return true; 
      } 
      a = new Date($(a).attr('data-closeddate')); 
      b = new Date($(b).attr('data-closeddate')); 
      return (a - b) * sortDir; 
     }); 
     $('#project_table').html(info); 
     sortDir = -1; 
    }); 

}); 

당신은 내가 행을 정렬 할 data-attribute를 사용하고 볼 수 있듯이. 휴무일 열은 비어 있거나 날짜가있을 수 있습니다. 문제는 그냥 임의의 행을 정렬하는 것입니다, 또한, 나는 하단에있는 모든 빈 행과 닫힌 날짜 상단에있는 행을 가져 오려고합니다. 내가 뭘 잘못하고 있니?

여기까지 내가 지금까지해온 것을보고 싶은 사람들을위한 jsbin의 작업입니다. 어떤 도움을 주셔서 감사합니다.

UPDATE는

다음 업데이트 jsbin입니다. 지금은 닫힌 날짜순으로 정렬 할 수 있지만 여전히 빈 닫힌 날짜가있는 행은 맨 아래로 강제로 이동하지 않습니다.

+0

작동하지 않는 기능은 무엇입니까? 닫힌 날짜순으로 정렬하면 잘 작동합니다. – juvian

+0

@juvian 글쎄요, 닫힌 날짜가있는 행을 가져온 다음 비어있는 행을 가져 와서 정렬하고 싶습니다. – user1601973

+1

모든 브라우저가'new Date ('Apr 25 2014');'형식으로 날짜 문자열을 올바르게 파싱 할 것이라고 기대하지는 않습니다. 일부 결과는'NaN'입니다. 대신에 [시간 값] (http://ecma-international.org/ecma-262/5.1/#sec-15.9.1.1)을 사용해보십시오. – RobG

답변

2

내림차순이고 데이터가 "null"인 경우 데이터를 1900 년 1 월 1 일로 지정하십시오 (따라서 하단에 있습니다) 오름차순이고 데이터가 "null"이면 데이터를 1 Jan 9999 하단에 있습니다)

그런 다음 정상 비교 yx 또는 xy를 수행하십시오.

http://jsbin.com/nalomuje/23/edit

관련 문제