jQuery：フィルタされたデータから表の行を再作成

Question

* EDIT * 物事をクリアする。私は表示して非表示にすることができます。それは問題ではない。私がしたいのは、クラスに基づいてテーブルの行を完全に再構築することです。私が最初に入ったとき、テーブルには何千もの行が潜んでいる可能性があります。彼らはすべて '両方'、 'オプション1'または 'オプション2'のクラスを持っています。私は一度にこれらの5つを表示し、最初、前、次、最後のボタンのクリックに基づいてページを表示する必要があります。ただし、表の行の一部が表示され、一部が表示されるべきでない場合は、非常に困難になります。

私はテーブルhtmlを再構築するために本質的に3つの配列を持っていたいと思います。 1つはすべての行を持ち、1つはOption1行と1つはOption2行です。

これはもう少し明確です。 * END EDIT *

私はテーブルが構築されていて、すぐにすべての行が非表示になっています。次に、ラジオボタンのクリックイベントに応じて、指定された条件でテーブルの最初の5行を表示します。

3つのオプション（両方、オプション1またはオプション2）のみがあります。それぞれはTRのクラスに組み込まれています。

ページングを簡略化するため、結果を3つの配列にフィルタリングしたいと思います。すべて1、オプション1の場合は1、オプション2の場合は1を入力し、tbodyを行で置き換えます。

私はそれが正常に機能していない、次のコードを持っている：次の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> 

：次のHTML（選択）して

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

を

<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）を選択し、ブラウザに戻す必要があります。いいえ、JavaScriptのトリッキーは必要ありません。

次に、nextまたはprevをクリックすると、+/- the pageNumを押すことができます。

クライアント側のページングのパスを引き続き使用したい場合は、私のサンプルコードをより近いものに更新しました。必要に応じて変更してください。 ...

* ENDのEDIT *

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で質問をタグ付けするので、ユーザがラジオボタンをクリックすると、あなたのPHPは、表示したいだけの5行で新しいページをレンダリングしているとき、なぜsubmitをトリガしませんか？