Question

*编辑* 清理事情。我能够展示和隐藏。那不是问题。我想要做的是完全重建基于类的表行。当我最初进入时，表可能有数千行。他们都会有一个'both'，'option1'或'option2'。我必须一次只显示其中的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

*编辑*

将所有结果返回给浏览器，然后在屏幕上实现分页不是分页，并且无法完成它的全部目的。

您应该发布“option1”/ pageNum / pageCount，选择页码和页数之间的前5位（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呈现一个只包含您要显示的五行的新页面？

jQuery：从过滤后的数据中重建表行

2 个答案: