显示部分查询结果答案

【问题标题】：Show part of query result显示部分查询结果
【发布时间】：2017-10-09 00:04:53
【问题描述】：

我的 joomla 模块模板中有这样的代码：

<table>
<tbody>
<tr>
<td style="width: 33px;" align="center"><strong>№</strong></td>
<td style="width: 148px;"><strong>Ник</strong></td>
<td style="width: 107px;"><strong>Рубли</strong></td>
</tr>

<?php

$position = 1;  

foreach ($top as $row) {
    echo '<tr>';
    echo '<td>' . $position . '</td>';
    echo '<td>' . $row['0'] . '</td>';
    echo '<td>' . $row['1'] . '</td>';
    echo '</tr>';
    $position ++;
}
?>
</table>

此代码显示了一个包含 JDatabaseQuery 结果的表，该表包含在变量 $top 中。

result table

我想将显示的结果限制在 10 个，在末尾添加一个“显示全部”按钮，它将打开所有列表的结果集。我想为此目的使用 jquery。

我应该使用什么结构的 css 和 jquery？

【问题讨论】：

标签： php jquery css sql joomla

【解决方案1】：

您可以使用 jquery 来完成，在 10 行后隐藏行并单击按钮显示所有行 -

$(function(){
    $("table tr:gt(10)").hide();
    //suppose below is the button on click of which you need to show all rows
    $("button").click(function(){
    $("table tr:gt(10)").show();
    });
});

见下面代码sn-p

$(function(){
  $("table tr:gt(10)").hide();
  $("#show").click(function(){
  $("table tr:gt(10)").show();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="show" type="button" value="Show Columns">
<table>
  <tr>
    <th>HEADING1</th>
    <th>HEADING2</th>
    <th>HEADING3</th>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr><tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr><tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr><tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
  <tr>
    <td>column1</td>
    <td>column2</td>
    <td>column3</td>
  </tr>
</table>

【讨论】：