表格'显示更多'搜索后重置

时间：2017-08-09 13:56:53

标签： javascript jquery

我有一个功能，当我的表格中有超过30行时，会添加一个“显示更多”按钮。这适用于初始页面加载，但在搜索/过滤表格后消失。

在使用搜索/过滤器之后/之后是否可以加载/重新加载“显示更多”功能，因此它仍然可用？

这是有问题的功能：

$(function () {
$table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
    .after('<tbody id="more"><tr><td colspan="' +
           $table.find('tr:first td').length + '"><div>Show <span>' +
           numMore + '</span> More</div</tbody></td></tr>');

$('#more').click(function() {
    numShown = numShown + numMore;
    if (numShown >= numRows) {
        $('#more').remove();
    }
    if (numRows - numShown < numMore) {
        $('#more span').html(numRows - numShown);
    }
    $table.find('tr:lt(' + numShown + ')').show();
});
});

我尝试过使用一些没有给出我想要的结果的jQuery监听器。

$("#search").keyup(function() {
  var searchText = $(this).val().toLowerCase();
  // Show only matching TR, hide rest of them
  $.each($("#table tbody tr"), function() {
    if ($(this).text().toLowerCase().indexOf(searchText) === -1)
      $(this).hide();
    else
      $(this).show();
  });
});

var numShown = 2; // Initial rows shown & index
var numMore = 1; // Increment

var $table = $('#table').find('tbody'); // tbody containing all the rows
var numRows = $table.find('tr').length; // Total # rows

$(function() {
  // Hide rows and add clickable div
  $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
    .after('<tbody id="more"><tr><td colspan="' +
      $table.find('tr:first td').length + '"><div>Show <span>' +
      numMore + '</span> More</div</tbody></td></tr>');

  $('#more').click(function() {
    numShown = numShown + numMore;
    if (numShown >= numRows) {
      $('#more').remove();
    }
    if (numRows - numShown < numMore) {
      $('#more span').html(numRows - numShown);
    }
    $table.find('tr:lt(' + numShown + ')').show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1">
  <tr>
    <td>Row:1 Cell:1</td>
    <td>Row:1 Cell:2</td>
    <td>Row:1 Cell:3</td>
  </tr>
  <tr>
    <td>Row:2 Cell:1</td>
    <td>Row:2 Cell:2</td>
    <td>Row:2 Cell:3</td>
  </tr>
  <tr>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
    <td>Row:3 Cell:3</td>
  </tr>
  <tr>
    <td>Row:4 Cell:1</td>
    <td>Row:4 Cell:2</td>
    <td>Row:4 Cell:3</td>
  </tr>
  <tr>
    <td>Row:5 Cell:1</td>
    <td>Row:5 Cell:2</td>
    <td>Row:5 Cell:3</td>
  </tr>
  <tr>
    <td>Row:6 Cell:1</td>
    <td>Row:6 Cell:2</td>
    <td>Row:6 Cell:3</td>
  </tr>
  <tr>
    <td>Row:7 Cell:1</td>
    <td>Row:7 Cell:2</td>
    <td>Row:7 Cell:3</td>
  </tr>
  <tr>
    <td>Row:8 Cell:1</td>
    <td>Row:8 Cell:2</td>
    <td>Row:8 Cell:3</td>
  </tr>
  <tr>
    <td>Row:1 Cell:1</td>
    <td>Row:1 Cell:2</td>
    <td>Row:1 Cell:3</td>
  </tr>
  <tr>
    <td>Row:2 Cell:1</td>
    <td>Row:2 Cell:2</td>
    <td>Row:2 Cell:3</td>
  </tr>
  <tr>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
    <td>Row:3 Cell:3</td>
  </tr>
  <tr>
    <td>Row:4 Cell:1</td>
    <td>Row:4 Cell:2</td>
    <td>Row:4 Cell:3</td>
  </tr>
  <tr>
    <td>Row:5 Cell:1</td>
    <td>Row:5 Cell:2</td>
    <td>Row:5 Cell:3</td>
  </tr>
  <tr>
    <td>Row:6 Cell:1</td>
    <td>Row:6 Cell:2</td>
    <td>Row:6 Cell:3</td>
  </tr>
  <tr>
    <td>Row:7 Cell:1</td>
    <td>Row:7 Cell:2</td>
    <td>Row:7 Cell:3</td>
  </tr>
  <tr>
    <td>Row:8 Cell:1</td>
    <td>Row:8 Cell:2</td>
    <td>Row:8 Cell:3</td>
  </tr>
  <tr>
    <td>Row:1 Cell:1</td>
    <td>Row:1 Cell:2</td>
    <td>Row:1 Cell:3</td>
  </tr>
  <tr>
    <td>Row:2 Cell:1</td>
    <td>Row:2 Cell:2</td>
    <td>Row:2 Cell:3</td>
  </tr>
  <tr>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
    <td>Row:3 Cell:3</td>
  </tr>
  <tr>
    <td>Row:4 Cell:1</td>
    <td>Row:4 Cell:2</td>
    <td>Row:4 Cell:3</td>
  </tr>
  <tr>
    <td>Row:5 Cell:1</td>
    <td>Row:5 Cell:2</td>
    <td>Row:5 Cell:3</td>
  </tr>
  <tr>
    <td>Row:6 Cell:1</td>
    <td>Row:6 Cell:2</td>
    <td>Row:6 Cell:3</td>
  </tr>
  <tr>
    <td>Row:7 Cell:1</td>
    <td>Row:7 Cell:2</td>
    <td>Row:7 Cell:3</td>
  </tr>
  <tr>
    <td>Row:8 Cell:1</td>
    <td>Row:8 Cell:2</td>
    <td>Row:8 Cell:3</td>
  </tr>
</table>
<input type="text" id="search" placeholder="live search">

JSFiddle Here

问题在于，当我搜索时，我希望“显示更多”应用于搜索结果，而不仅仅是初始表。

1 个答案:

答案 0 :(得分：0)

您需要对代码进行一些更改才能使其按预期工作：

  • 创建一个新功能，用于创建更多行＆＃39;
  • 在每次搜索和初次通话中调用此功能
  • 将点击次数更改为on，而不是正常点击。

您可以在以下代码中看到：

＆＃13;
＆＃13; 
$("#search").keyup(function() {
  var searchText = $(this).val().toLowerCase();
  // Show only matching TR, hide rest of them
  $.each($("#table tbody tr"), function() {
    if ($(this).text().toLowerCase().indexOf(searchText) === -1)
      $(this).hide();
    else
      $(this).show();


  });
  $('#more').remove();
  addMoreRow();
});

var numShown = 2; // Initial rows shown & index
var numMore = 2; // Increment

var $table = $('#table').find('tbody'); // tbody containing all the rows
var numRows = $table.find('tr').length; // Total # rows

function addMoreRow() {
  $table.find('tr:gt(' + (numShown - 1) + ')').hide().end()
    .after('<tbody id="more"><tr><td colspan="' +
      $table.find('tr:first td').length + '"><div>Show <span>' +
      numMore + '</span> More</div</tbody></td></tr>');
}

$(function() {
  // Hide rows and add clickable div
  addMoreRow();

  $('table').on('click', '#more', function() {
    numShown = numShown + numMore;
    if (numShown >= numRows) {
      $('#more').remove();
    }
    if (numRows - numShown < numMore) {
      $('#more span').html(numRows - numShown);
    }
    $table.find('tr:lt(' + numShown + ')').show();
  });
});
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="table" border="1">
  <tr>
    <th>Header 1</th>
    <th>Header 2</th>
    <th>Header 3</th>
  </tr>
  <tr>
    <td>Row:1 Cell:1</td>
    <td>Row:1 Cell:2</td>
    <td>Row:1 Cell:3</td>
  </tr>
  <tr>
    <td>Row:2 Cell:1</td>
    <td>Row:2 Cell:2</td>
    <td>Row:2 Cell:3</td>
  </tr>
  <tr>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
    <td>Row:3 Cell:3</td>
  </tr>
  <tr>
    <td>Row:4 Cell:1</td>
    <td>Row:4 Cell:2</td>
    <td>Row:4 Cell:3</td>
  </tr>
  <tr>
    <td>Row:5 Cell:1</td>
    <td>Row:5 Cell:2</td>
    <td>Row:5 Cell:3</td>
  </tr>
  <tr>
    <td>Row:6 Cell:1</td>
    <td>Row:6 Cell:2</td>
    <td>Row:6 Cell:3</td>
  </tr>
  <tr>
    <td>Row:7 Cell:1</td>
    <td>Row:7 Cell:2</td>
    <td>Row:7 Cell:3</td>
  </tr>
  <tr>
    <td>Row:8 Cell:1</td>
    <td>Row:8 Cell:2</td>
    <td>Row:8 Cell:3</td>
  </tr>
  <tr>
    <td>Row:1 Cell:1</td>
    <td>Row:1 Cell:2</td>
    <td>Row:1 Cell:3</td>
  </tr>
  <tr>
    <td>Row:2 Cell:1</td>
    <td>Row:2 Cell:2</td>
    <td>Row:2 Cell:3</td>
  </tr>
  <tr>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
    <td>Row:3 Cell:3</td>
  </tr>
  <tr>
    <td>Row:4 Cell:1</td>
    <td>Row:4 Cell:2</td>
    <td>Row:4 Cell:3</td>
  </tr>
  <tr>
    <td>Row:5 Cell:1</td>
    <td>Row:5 Cell:2</td>
    <td>Row:5 Cell:3</td>
  </tr>
  <tr>
    <td>Row:6 Cell:1</td>
    <td>Row:6 Cell:2</td>
    <td>Row:6 Cell:3</td>
  </tr>
  <tr>
    <td>Row:7 Cell:1</td>
    <td>Row:7 Cell:2</td>
    <td>Row:7 Cell:3</td>
  </tr>
  <tr>
    <td>Row:8 Cell:1</td>
    <td>Row:8 Cell:2</td>
    <td>Row:8 Cell:3</td>
  </tr>
  <tr>
    <td>Row:1 Cell:1</td>
    <td>Row:1 Cell:2</td>
    <td>Row:1 Cell:3</td>
  </tr>
  <tr>
    <td>Row:2 Cell:1</td>
    <td>Row:2 Cell:2</td>
    <td>Row:2 Cell:3</td>
  </tr>
  <tr>
    <td>Row:3 Cell:1</td>
    <td>Row:3 Cell:2</td>
    <td>Row:3 Cell:3</td>
  </tr>
  <tr>
    <td>Row:4 Cell:1</td>
    <td>Row:4 Cell:2</td>
    <td>Row:4 Cell:3</td>
  </tr>
  <tr>
    <td>Row:5 Cell:1</td>
    <td>Row:5 Cell:2</td>
    <td>Row:5 Cell:3</td>
  </tr>
  <tr>
    <td>Row:6 Cell:1</td>
    <td>Row:6 Cell:2</td>
    <td>Row:6 Cell:3</td>
  </tr>
  <tr>
    <td>Row:7 Cell:1</td>
    <td>Row:7 Cell:2</td>
    <td>Row:7 Cell:3</td>
  </tr>
  <tr>
    <td>Row:8 Cell:1</td>
    <td>Row:8 Cell:2</td>
    <td>Row:8 Cell:3</td>
  </tr>
</table>
<input type="text" id="search" placeholder="live search">
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题