jQuery : 필터링 된 데이터에서 테이블 행 다시 작성

Question

* EDIT * 내용을 정리하십시오. 나는 보여주고 숨길 수있다. 그건 문제가 아니야. 내가 뭘하고 싶은 건 완전히 클래스를 기반으로 테이블 행을 다시 작성하는 것입니다. 처음에 들어 오면 테이블에 수천 개의 행이있을 수 있습니다. 그들은 모두 'both', 'option1'또는 'option2'의 클래스를가집니다. 나는 오직 한 번에 5 개를 보여 주어야하며, 첫 번째, 이전, 다음, 마지막 버튼 클릭을 기준으로 한 페이지를 표시해야합니다. 그러나 일부 테이블 행이 표시되고 일부는 표시되면 안되기 때문에 엄청나게 어려워집니다.

그래서 본질적으로 테이블 html을 재구성하기 위해 3 개의 어레이를 갖고 싶습니다. 하나는 모든 행을 가지며, 하나는 Option1 행과 하나는 Option2 행입니다.

바라건대 그것은 좀 더 분명합니다. * END EDIT *

테이블이 만들어져 있고 모든 행이 숨겨져 있습니다. 그런 다음 라디오 버튼 클릭 이벤트에 따라 주어진 기준으로 표의 처음 5 행을 표시합니다.

두 가지 옵션 (옵션 1 또는 옵션 2) 만 있습니다. 각각은 TR에있는 클래스에 내장되어 있습니다.

페이징을 단순화하기 위해 결과를 3 개의 배열로 필터링하고 싶습니다. 1은 모두 1, 옵션 1은 1, 옵션 2는 1입니다. 그러면 tbody를 행으로 바꿉니다.

I, 즉 올바르게 다음 코드를 작동하지 않은 :

var trHTML = $("#resultsBody").html(); 
var newTable = trHTML.filter(function() { return $(this).css("display") == "none" }) 
$('#resultsBody').empty().append(trHTML); 

을 다음과 같은 HTML로 (선택) : 다음과 같은 HTML (테이블)와

<div id="edit-network" class="form-radio"> 
    <div class="form-item form-type-radio form-item-network"> 
    <input id="edit-network-all" class="form-radio" type="radio" name="network" value="all" checked="checked"> 
    <label class="option" for="edit-network-all">All </label> 
    </div> 
    <div class="form-item form-type-radio form-item-network"> 
    <input id="edit-network-access" class="form-radio" type="radio" name="network" value="access"> 
    <label class="option" for="edit-network-access">Access </label> 
    </div> 
    <div class="form-item form-type-radio form-item-network"> 
    <input id="edit-network-select" class="form-radio" type="radio" name="network" value="select"> 
    <label class="option" for="edit-network-select">Select </label> 
    </div> 
</div> 

:

<div class="result"> 
    <table id="results" width="100%" summary="Dentist search results" title="Dentist search results"> 
    <tbody id="resultsBody"> 
     <tr id="row1" class="both odd" style="display: table-row;"> 
     <th id="this-data">Heading</th> 
     <th id="that-data">Heading</th> 
     <th id="other-data">Heading</th> 
     </tr> 
     <tr id="row2" class="option2 odd" style="display: table-row;"> 
     <td headers="this-data">something</td> 
     <td headers="that-data">more data</td> 
     <td headers="other-data">other data</td> 
     <tr id="row3" class="option1 odd" style="display: table-row;"> 
     <tr id="row4" class="both odd" style="display: table-row;"> 
     ... 
     ... 
     <tr id="row100" class="both" style="display: none;"> 
    </tbody> 
    </table> 
</div> 

제안 사항이 있으십니까? 플러그인은 해결책이 아닙니다. 이것은 매우 구체적인 디자인 사양으로 작동해야하므로이 짐승의 배짱이와 함께 일하고 있습니다.

감사합니다.

Answer 1

*이 EDIT *

브라우저에 모든 결과를 반환 한 후 화면에 페이징을 구현 페이징하지 않고, 그것의 전체 목적을 격파한다.

"option1"/ pageNum/pageCount를 게시하고 페이지 번호와 페이지 수 사이에있는 상위 5 개 (pageCount)를 선택한 다음 브라우저로 반환해야합니다. 자바 스크립트 트릭이 필요하지 않습니다.

다음을 클릭하거나 prev를 클릭하면 +/- the pageNum이됩니다.

클라이언트 측 페이징 경로를 계속 진행하려면 필자의 예제 코드를 더 가까운 것으로 업데이트했습니다. 필요에 따라 수정하십시오. 그것은

* END 편집 ... 대량의 데이터를 통해 느린 것 *

function(selectedValue, pageNum, pageCount) { 
    var recordsSkipped = 0; 
    var numShown = 0; 

    $("#resultsbody tr").each(function(){ 
     if(recordsSkipped >= (pageNum - 1) * pageCount 
      && numShown < pageCount 
      && ($(this).hasClass(selectedValue) || $(this).hasClass("both"))) { 

      $(this).show(); 
      numShown++; 
     } 
     else { 
      $(this).hide(); 
      recordsSkipped++; 
     } 
    }; 
} 

Answer 2

var bothRowsHTML = $("#resultsBody tr.both").html(); 
var option1RowsHTML = $("#resultsBody tr.option1").html(); 
var option2RowsHTML = $("#resultsBody tr.option2").html(); 

"수천 행"이라고 말하면 사용자의 코드가 브라우저의 속도를 늦출 수 있습니다. 페이지가로드되기 전에 서버 측에서 적절한 행을 렌더링하는 방법이 있습니까? 당신이 php로 질문을 태그 때문에

---

, 왜 사용자가 라디오 버튼을 클릭 할 때 submit을 트리거하고 PHP가 표시 할 경우에만 다섯 행에 새 페이지를 렌더링하지?