jQuery: перестроить строки таблицы из отфильтрованных данных

Question

* EDIT * Чтобы все выяснить. Я могу показать и спрятаться. Это не проблема. То, что я хотел бы сделать, - это полностью перестроить строки таблицы, основанные на классе. Когда я впервые войду, таблица может иметь тысячи строк. Все они будут иметь класс «оба», «вариант1» или «вариант2». Я должен показывать только 5 из них за один раз, а страница через них основана на первом, предыдущем, следующем, последнем нажатии кнопки. Тем не менее, это становится невероятно сложной задачей, когда некоторые строки таблицы должны отображаться, а некоторые - нет.

Так что я хотел бы иметь, по существу, 3 массива, чтобы перестроить таблицу html. У каждого были бы все строки, один с Option1 и один с Option2 строк.

Надеюсь, это немного более ясно. * END EDIT *

У меня есть таблица, которая построена и сразу же содержит все строки. Затем, в зависимости от события нажатия кнопки переключателя, я показываю первые 5 строк таблицы с заданными критериями.

Есть только 3 варианта (оба варианта 1 или вариант 2). Каждый из них встроен в класс на TR.

Для упрощения поискового вызова я хотел бы отфильтровать результаты в 3 массивах. 1 для всех, 1 для вариантов 1 и 1 для варианта 2, а затем просто замените tbody на строки.

Я следующий код, который не работает правильно:

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

С следующий 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 (таблица):

<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, выбрать верхнюю пятую (pageCount), которая находится между вашим номером страницы и количеством страниц, а затем вернуть ее в браузер. Нет необходимости в javascript-обманке.

Тогда при нажатии следующей или предыдущей вы можете +/- 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, почему бы не вызвать submit, когда пользователь нажимает на кнопку радио, и ваш PHP делают новую страницу только пять строк, которые вы хотите отобразить?