jQuery: Rebuild table rows from filtered data

Question

* EDIT * To clear things up. I'm able to show and hide. That's not an issue. What I'd like to do is completely rebuild the table rows based off the class. When I initially come in, the table could potentially have thousands of rows. They'll all have a class of 'both', 'option1' or 'option2'. I have to only show 5 of these at a time and page through them based off first, previous, next, last button clicks. However, it becomes incredibly challenging when some of the table rows should show and some should not.

So I'd like to have, essentially, 3 arrays to rebuild my table html from. One would have all rows, one with Option1 rows and one with Option2 rows.

Hopefully that's a little more clear. * END EDIT *

I have a table that is built and immediately has all the rows hidden. Then, depending upon a radio button click event, I show the first 5 rows of the table with the given criteria.

There are only 3 options (Both, option 1 or option 2). Each is built into the class on the TR.

For the simplification of paging, I'd like to filter my results into 3 arrays. 1 for all, 1 for option 1 and 1 for option 2, then just replace the tbody with the rows.

I have the following code, that's not working correctly:

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

With the following HTML (selection):

<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>

With the following HTML (table):

<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>

Any suggestions? A plug-in isn't the solution. This needs to work to a very specific design spec, so I'm working only with the guts of this beast.

Thanks!

Timeout Timeout · Accepted Answer · 2012-02-16T20:06:18

* EDIT *

Returning all your results to the browser and then implementing paging on the screen is not paging, and defeats the whole purpose of it.

You should post "option1" / pageNum / pageCount, select the top 5 (pageCount) that are in between your page number and page count, and then return that to the browser. No javascript trickery necessary.

Then when clicking next or prev you can +/- the pageNum.

If you still want to continue down the path of client side paging I've updated my example code to something closer, modify as needed. It will be slow over large sets of data...

* 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++;
        }
    };
}

jQuery: Rebuild table rows from filtered data

2 Answers