Passing a paginated listing info from one page to another

Question

Within a Bootstrap 4 card, I have a table listing books with 3 columns, of which the first contains a checkbox for each book. The count of the books selected by the user is displayed in the card's footer.

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>

The problem is that, in the real-life project, the books listing is paginated and I need to pass the books count from one page to another (and update it with the books selected on each page), to be able to get the correct count.

How can I achieve this?

Can't you just wrap this in a form and have server return the filtered data based on what is posted? Or be more specific about how pagination works — charlietfl, Nov 19 '18 at 18:13
possibly doublicate of. https://stackoverflow.com/questions/36599781/how-to-pass-data-from-one-page-to-another-page-html you can also use cookies. — Sameer, Nov 19 '18 at 18:16
@charlietfl I need (almost) instant count display. I was considering local storage but I am currently unfamiliar (and uncomfortable) with local storage related techniques. — Razvan Zamfir, Nov 19 '18 at 18:22
you might be able to count the checked book number, but you must need the exact books that have been checked right ? — Towkir, Nov 19 '18 at 19:06
@TowkirAhmed It seems to me that I would need an array of books to *pass* from one page to another, *update* and *count*. — Razvan Zamfir, Nov 19 '18 at 19:09
It is possible to do with `localstorage`, why don't you handle it from server end ? — Towkir, Nov 19 '18 at 19:11

Passing a paginated listing info from one page to another

0 Answers0