分页按jQuery恢复已删除的行

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <!-- 数据行 -->
  </tbody>
</table>

<button id="restore-btn">恢复已删除的行</button>

$(document).ready(function() {
  // 恢复已删除的行按钮点击事件
  $('#restore-btn').click(function() {
    // 获取被删除行的数据（这里假设已删除的行数据存储在一个数组中）
    var deletedRowData = getDeletedRowData();

    // 遍历被删除行的数据，逐个添加到表格中
    $.each(deletedRowData, function(index, rowData) {
      var newRow = '<tr>' +
        '<td>' + rowData.name + '</td>' +
        '<td>' + rowData.age + '</td>' +
        '<td><button class="delete-btn">删除</button></td>' +
        '</tr>';
      $('#data-table tbody').append(newRow);
    });
  });

  // 删除按钮点击事件（这里假设删除按钮的类名为delete-btn）
  $('#data-table').on('click', '.delete-btn', function() {
    // 删除行的操作
    $(this).closest('tr').remove();
  });
});

// 获取被删除行的数据的函数
function getDeletedRowData() {
  // 这里可以根据实际情况获取已删除行的数据，可以从后端请求或者从其他地方获取
  // 假设已删除行的数据存储在一个数组中，并返回该数组
  var deletedRowData = [
    { name: 'John', age: 25 },
    { name: 'Jane', age: 30 }
  ];
  return deletedRowData;
}