Get All Table Row Values when Checked

Question

I have a multiple column table with one column being checkboxes. If you check a checkbox then press the "Checkout" button, it will take the specified rows and display them in the body of an email.

I originally bring in the top 100 rows to keep the info to a minimum for the user. I also have a search functionality where the user can search for specific rows. While you can maneuver throughout different searches and still keep all of the checkboxes checked with session storage, when you hit "Checkout" it only displays the table rows that are checked and currently visible on the page.

So, if I searched for a table row and checked it, but then went back to the original top 100 rows by clicking home, then that row would not display on the email because it is not displayed in the top 100.

How can I fix this and show ALL rows that have been checked, whether they are visible on the page or not?

HTML:

<section id="checkout-btn"> 
<button id="checkout" name="order" onclick="sendMail(); return false">Checkout</button>
</section>

<br>

<table id="merchTable" cellspacing="5" class="sortable">
    <thead>
        <tr class="ui-widget-header">
            <th class="sorttable_nosort"></th>
            <th class="sorttable_nosort">Loc</th>
            <th class="merchRow">Report Code</th>
            <th class="merchRow">SKU</th>
            <th class="merchRow">Special ID</th>
            <th class="merchRow">Description</th>
            <th class="merchRow">Quantity</th>
            <th class="sorttable_nosort">Unit</th>
            <th style="display: none;" class="num">Quantity #</th>
        </tr>
    </thead>
    <tbody>

        <?php foreach ($dbh->query($query) as $row) {?>

        <tr>
            <td class="ui-widget-content"><input type="checkbox" class="check" name="check" id="checkid-<?php echo intval ($row['ID'])?>"></td>
            <td class="loc ui-widget-content" data-loc="<?php echo $row['Loc'] ?>"><input type="hidden"><?php echo $row['Loc'];?></td>
            <td class="rp-code ui-widget-content" align="center" data-rp-code="<?php echo $row['Rp-Code'] ?>" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
            <td class="sku ui-widget-content" data-sku="<?php echo $row['SKU'] ?>" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
            <td class="special-id ui-widget-content" data-special-id="<?php echo $row['Special-ID'] ?>" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
            <td class="description ui-widget-content" data-description="<?php echo htmlspecialchars($row['Description']) ?>" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
            <td class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
            <td class="unit ui-widget-content" data-unit="<?php echo $row['Unit'] ?>" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
            <td style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" id="spin-<?php echo intval ($row['ID'])?>"></td>
        </tr>

    <?php } ?>

    </tbody>
</table>

JavaScript that brings in data from table to email:

function sendMail() {
    var link = "mailto:me@example.com"
             + "?subject=" + encodeURIComponent("Order")
             + "&body=";

    var body = '';

  $('table tr input[name="check"]:checked').each(function(){
    var current_tr = $(this).parent().parent();

    var data = current_tr.find('.loc').data('loc');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.rp-code').data('rp-code');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.sku').data('sku');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.special-id').data('special-id');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.description').data('description');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.quantity').data('quantity');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.unit').data('unit');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    var data =current_tr.find('.spinner').data('spinner');
    body +=  encodeURIComponent(data) + '\xa0\xa0';

    body += '%0D%0A';

  });

  body += '';
  link += body;
  console.log(link);

  window.location.href = link;
}

JavaScript for keeping checked checkboxes, checked, throughout the session:

$(function(){
    $(':checkbox').each(function() {
        var $el = $(this);
        $el.prop('checked', sessionStorage[$el.prop('id')] === 'true');
    });

    $('input:checkbox').on('change', function() { 
        var $el = $(this);
        sessionStorage[$el.prop('id')] = $el.is(':checked');
    });
});

Answer 1

Partial answer - too long for comment

From your earlier question , we understand that each checked row has a quantity_num input and that you want its user-entered value to be included in the email body alongside the fixed row data, loc , rp-code etc.

It appears that sessionStorage holds only the checked state of the rows, not the quantity_num value. If so, then pagination dictates that quantity_num value is only available for currently displayed rows - for all other rows, you know only the id of the checked rows, not their quantity_num value.

Therefore, the first thing to do is to ensure that "id|quantity_num" pairs are stored (in sessionStorage). Other data, loc , rp-code etc. is associated with the id and can be retrieved from the server and used either client-side or (preferably) server-side to compose the email body.