javascript - 将分页列表信息从一个页面传递到另一个页面

Question

在Bootstrap 4卡中，我有一个表格列出了 3 列书籍，其中第一列包含每本书的复选框。用户选择的书籍数量显示在卡片的页脚中。

var countChecked = function() {

  var $checkBox = $(this),
    $checkContainer = $checkBox.closest('table'),
    $checkedBoxes = $checkContainer.find('input[type=checkbox]:checked'),
    checkedCount = $checkedBoxes.length;

  $("#books_count").text(checkedCount);

};

$("#books").find("input[type='checkbox']").on('change', countChecked);

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="container p-0">
  <div id="books" class="card mx-1 my-1">
    <div class="card-header">Pick books</div>
    <div class="card-body p-0">
      <table class="table table-bordered table-sm m-0">
        <thead>
          <tr>
            <th>Select</th>
            <th>Title</th>
            <th>Author</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td><input class="add" type="checkbox" name="add_1" value="1"></td>
            <td>Don Quixote</td>
            <td>Miguel de Cervantes</td>
          </tr>
          <tr>
            <td><input class="add" type="checkbox" name="add_2" value="2"></td>
            <td>Ulysses</td>
            <td>James Joyce</td>
          </tr>
          <tr>
            <td><input class="add" type="checkbox" name="add_3" value="3"></td>
            <td>The Great Gatsby</td>
            <td>F. Scott Fitzgerald</td>
          </tr>
          <tr>
            <td><input class="add" type="checkbox" name="add_4" value="4"></td>
            <td>War and Peace</td>
            <td>Leo Tolstoy</td>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="card-footer border-top-0">
      You selected <strong id="books_count">0</strong> books
    </div>
  </div>
</div>

问题是，在现实生活中的项目中，书籍列表是分页的，我需要将书籍数量从一页传递到另一页（并使用每页上选择的书籍进行更新），才能获得正确的数数。

我怎样才能做到这一点？

标签： javascriptjquery