jQuery tablesorter, staticwidget 및 sortList를 함께 사용 하시겠습니까?

Question

두 가지가 함께 작동하지 않는 이유를 알 수 없습니다. 테이블 정렬 기능이있는 테이블을 가지고 있습니다. 나는 멋진 div처럼 보이도록 행 스타일을 지정하고 각 행 사이에 공백이 필요했습니다. CSS 클래스가있는 빈 상자를 사용하여이 작업을 수행 한 다음 '정적'위젯도 적용합니다. 이 모든 것이 잘 작동합니다. 정렬 할 때 보이지 않는 간격 행이 유지됩니다.

기본 sortList도 설정하려고하면 문제가 발생합니다. 나는 아래의 다른 코드를 시도했다. 자바 스크립트 및 메타 데이터로 설정하려고합니다. 둘은 단순히 함께 작동하지 않습니다. 정적 위젯을 사용하지 않는 한 sortList가 정상적으로 작동합니다. 그러나 이들이 함께있을 때 행은 정적이지만 정렬 순서대로 함께 누적됩니다.

누구나 정적 위젯과 sortList를 함께 사용하는 방법을 찾아 낼 수 있습니까? 고맙습니다!

(내가 jQuery를 2.14 html로 머리에로드, tablesorter에, staticRow 위젯 및 메타 데이터의 .js의가)

그것은 함께 이런 식으로 작동하지 않습니다

$(document).ready(function(){ 
    $('#myTable').tablesorter({ 
     widgets: ['staticRow'], 
     sortList: [[0,0]] 
    }); 
}); 

을하지만 단독으로 작업을 수행 :

$(document).ready(function(){ 
    $('#myTable').tablesorter({ 
     widgets: ['staticRow'] 
    }); 
}); 

또는

$(document).ready(function(){ 
    $('#myTable').tablesorter({ 
     sortList: [[0,0]] 
    }); 
}); 

의이 시도 :

$(document).ready(function(){ 
    $('#myTable').tablesorter({ 
     widgets: ['staticRow'] 
    }); 
}); 

<table id="myTable" class="tablesorter {sortlist: [[0,0],[4,0]]}"> 

Answer 1

문제는 위젯이 적용하기 전에 테이블 tablesorter에 정렬된다. 그래서 위젯은 정렬 후에 행 인덱스를 설정합니다. 당신은 작은 테이블이있는 경우, 더 많은 시간이 초기화되기 전에 필요한 것보다 큰 테이블이있는 경우 tablesorter에가 (demo)

$('#myTable') 
    .tablesorter({ 
    widgets: ['staticRow'] 
    }) 
    .trigger("sorton", [[[0,0]]]); 

을 initialzied 후, 가장 쉬운 해결책은 정렬을 유발하는 것입니다. 이 경우 setTimeout 안에 trigger을 추가하십시오.

---

업데이트 :이 코드를 사용하여 모든 정적 행을 숨기고에서 빠른 검색을 방지 할 수 있습니다 :

$('input#search').quicksearch('table tbody tr', { 
    hide: function(){ 
    this.style.display = $(this).hasClass('static') ? "table-row": "none"; 
    } 
}); 

하지만 당신은 정말 큰 차이 (demo)하게 될 겁니다.

이 문제를 해결하려면 몇 가지 CSS를 포함시켜야합니다. 인라인 스타일 (demo)을 재정의하려면 !important 플래그를 사용해야합니다.

tr[style*="display: none"] + tr.VerticalSpacer { 
    display: none !important; 
}