Passing a paginated listing info from one page to another

up vote
1
down vote

favorite

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?

edited Nov 19 at 18:51

asked Nov 19 at 18:05

Razvan Zamfir

7691955

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 at 18:13

possibly doublicate of. stackoverflow.com/questions/36599781/… you can also use cookies.
– Sameer Ahmad
Nov 19 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 at 18:22

1

LocalStorage is very very simple to use.
– charlietfl
Nov 19 at 18:24

you might be able to count the checked book number, but you must need the exact books that have been checked right ?
– Towkir Ahmed
Nov 19 at 19:06

|
show 2 more comments

up vote
1
down vote

favorite

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>

How can I achieve this?

edited Nov 19 at 18:51

asked Nov 19 at 18:05

Razvan Zamfir

7691955

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 at 18:13

possibly doublicate of. stackoverflow.com/questions/36599781/… you can also use cookies.
– Sameer Ahmad
Nov 19 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 at 18:22

1

LocalStorage is very very simple to use.
– charlietfl
Nov 19 at 18:24

you might be able to count the checked book number, but you must need the exact books that have been checked right ?
– Towkir Ahmed
Nov 19 at 19:06

|
show 2 more comments

up vote
1
down vote

favorite

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>

How can I achieve this?

edited Nov 19 at 18:51

asked Nov 19 at 18:05

Razvan Zamfir

7691955

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>

How can I achieve this?

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>

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>

javascript jquery

edited Nov 19 at 18:51

asked Nov 19 at 18:05

Razvan Zamfir

7691955

edited Nov 19 at 18:51

asked Nov 19 at 18:05

Razvan Zamfir

7691955

edited Nov 19 at 18:51

asked Nov 19 at 18:05

Razvan Zamfir

7691955

asked Nov 19 at 18:05

Razvan Zamfir

7691955

asked Nov 19 at 18:05

Razvan Zamfir

7691955

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 at 18:13

possibly doublicate of. stackoverflow.com/questions/36599781/… you can also use cookies.
– Sameer Ahmad
Nov 19 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 at 18:22

1

LocalStorage is very very simple to use.
– charlietfl
Nov 19 at 18:24

you might be able to count the checked book number, but you must need the exact books that have been checked right ?
– Towkir Ahmed
Nov 19 at 19:06

|
show 2 more comments

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 at 18:13

possibly doublicate of. stackoverflow.com/questions/36599781/… you can also use cookies.
– Sameer Ahmad
Nov 19 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 at 18:22

1

LocalStorage is very very simple to use.
– charlietfl
Nov 19 at 18:24

you might be able to count the checked book number, but you must need the exact books that have been checked right ?
– Towkir Ahmed
Nov 19 at 19:06

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 at 18:13

possibly doublicate of. stackoverflow.com/questions/36599781/… you can also use cookies.
– Sameer Ahmad
Nov 19 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 at 18:22

LocalStorage is very very simple to use.
– charlietfl
Nov 19 at 18:24

you might be able to count the checked book number, but you must need the exact books that have been checked right ?
– Towkir Ahmed
Nov 19 at 19:06

|
show 2 more comments

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53380329%2fpassing-a-paginated-listing-info-from-one-page-to-another%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Ytukyg