How to implement Multiple Checkbox in a pagination based table with Check/Uncheck All and then store all selected checkbox IDS into localstoarge

Question

I am not JavaScript expert. I am trying to implement some features in my table where I have a list of patients. I tried many ways, but can't be able to implement all features together from different approaches. What I am trying to do in my table is:

• Check/Uncheck Patients.
• Check/Uncheck all should work on all paginated pages.
• Store selected patients IDs into local storage.
• Whenever clicking on Check/Uncheck checkbox and individual checkbox, it should update & save the updated selected patient IDs into local storage.
• At the end, I just need the local storage Key. contains all selected patient IDs.

Here is the image of the patient table.

HTML

<div class="table-responsive">
  <table class="table" id="table">
    <thead>
      <tr class="text-muted">
        <th scope="col">
          <!---------------- Check / Uncheck All Checkboxes ----------->
            <input type="checkbox">
          <!----------------/ Check / Uncheck All Checkboxes ----------->
          <span class="d-none d-md-inline d-lg-inline select_counter"></span>
        </th>
        <th class="col-2">Patient</th>
        <th class="col-1">Age</th>
        <th class="col-1">Gender</th>
        <th class="col-1">Diagnosis</th>
        <th class="col-1">Medication</th>
        <th class="col-1">Last Rx</th>
      </tr>
    </thead>
    <tbody>
      <% @list_users.each.with_index(1) do |patient, index| %>
        <tr>

          <td class="col-1">
          <!---------------- Checkbox To Select Each Patient ------------->
             <input type="checkbox" id="<%= patient.id %>">
          <!---------------/ Checkbox To Select Each Patient ------------->
          </td>

          <td>
          <%=link_to user_name(patient.id)&.strip&.upcase, centres_ebroadcasts_find_by_id_path(user_id: patient.id,source:'patient_table'), :class=>"text-dark", remote:true %>
          </td>
          <td><%= patient&.date_of_birth? ? Date.today.year - patient&.date_of_birth.year : " -- " %></td>
          <td><%= patient.gender? ? patient.gender : "--" %></td>
          <td class="col-2">
            <% diagnosis = patient.consultations.map(&:diagnosis)%>
              <% if diagnosis.compact.empty? %>
                <span class="text-danger">No Diagnosis</span>
              <% else %>
                <%= truncate_text(diagnosis.uniq.compact.join(", "),120).upcase %>
            <% end %>
          </td>
          <td class="col-2">
            <% if medicine = patient&.prescriptions&.completed_prescriptions.map(&:medicines).empty? %>
              <span class="text-danger">No Medicines</span>
            <% else %>
              <%= truncate_text(patient&.prescriptions&.completed_prescriptions.map(&:medicines).flatten.map(&:name).uniq.compact.join(", "), 120).upcase %>
            <% end %>
          </td>
          <td class="col-2"><%= patient&.prescriptions&.completed_prescriptions&.first&.created_at&.strftime("%d, %B, %Y")%></td>
        </tr>
      <% end %>
    </tbody>
  </table>
</div>

<!--------------- Patient List Paginator -------------->
  <%= paginate @list_users %>
<!--------------/ Patient List Paginator -------------->

<!----------- Javascript --------->
<script>
</script>
<!----------/ Javascript --------->

Issues: When I was trying different approaches, I faced several issues in pagination. For example: checkboxes are only working on current paginated page. Check/Uncheck only works on current paginated page.

Could anyone please help me to implement this? Pure JavaScript or jQuery, any can be used.

Answer 1

Let's say that you are storing the IDs in your localstorage, by doing something like this. Also, since you mentioned that a jQuery solution would work for you, I'll show you how to do it in jQuery.

Also, a few inital assumptions:

• the IDs are unique. There can be no two (or more) patients with the same ID
• the IDs are numerical. This was done purely for simplification's sake

Resources used:

• uniques is a filtering function intially posted in this SO answer . I'm using it here, because it fits the purpose (removing (numerical) duplicates from a one-dimensional array), before writing to localstorage
• removeItemAll is used to remove eventual multiple occurrences of an ID. The function was initiallly posted in this SO answer

Final notes:

• the code below has not been tested, but it should work
• you would need to implement automatic checking of freshly loaded patients, if their ID is found in localstorage. That bit is not included in the code below

// helper functions
function uniques(value, index, self) {
    return self.indexOf(value) === index;
}

function removeItemAll(arr, value) {
    var i = 0;
    while (i < arr.length) {
        if (arr[i] === value) {
            arr.splice(i, 1);
        } else {
            ++i;
        }
    }
    return arr;
}

var idsToStore; // we'll use this later on

// let's take whatever we have in localstorage
// I'm going to use a JSON to store the IDS, and
// that JSON has this structure:
// {"ids" : [1,1,2,3,5,8,13....]}

// the IDs are stored in localstorage with the
// key of patientIDs
var stored = localStorage.getItem("patientIDs");
if(stored) {
    stored = JSON.parse(stored);
    stored = stored.ids; // this will give us an array to work with
} else {
    stored = []; // nothing was stored before
}

// let's get the ids of the checked patients
// this event handler is attached with the
// assumption that your table is always on the page
// and is not being CREATED dynamically (just filled
// dynamically). I'm also going with the
// assumption that your patient checkboxes have a 
// class called patients, and that your table
// has an ID of myTable

$("#myTable input[type=checkbox].patients").on("change",function(e) {
    e.preventDefault();

    // we note the id
    idsToStore = $(this).data("id");

    // we check the checkbox state
    if($(this).is(":checked")) {
        // if it's checked, we add it, if it's not already there
        if(stored.indexOf(idsToStore) <0) {
            stored.push(idsToStore);
        }

    // if the checkbox is no longer checked...
    } else {
        // ... remove it, if it was in the array
        const index = array.indexOf(idsToStore);
        if (index > -1) {
            // ... remove all occurrences, just in case there
            // were ever more than one
            removeItemAll(stored,idsToStore);
        }
    }

    // after everything's done, let's write back
    // to localstorage. To keep it in a JSON-like
    // format, I'm using JSON.stringify
    localStorage.setItem('patientIDs',JSON.stringify(stored));
});