显示部分查询结果

Question

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

此代码显示了一个 table 以及包含在变量 $top 中的 JDatabaseQuery 的结果。

result table

我想将显示的结果限制在 10 个以内，在末尾添加一个按钮 "show all"，它将打开所有列表的结果集。为此，我想使用 jquery。

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

Answer 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();
    });
});

查看下面的代码片段

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

显示部分查询结果

Show part of query result

css

php

sql

jquery

joomla