[英]How to implement Multiple Checkbox in a pagination based table with Check/Uncheck All and then store all selected checkbox IDS into localstoarge
I am not JavaScript expert.我不是 JavaScript 专家。 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:
我想在我的桌子上做的是:
Here is the image of the patient table.这是患者表的图像。
HTML 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.
纯JavaScript或jQuery,任意一个都可以。
Let's say that you are storing the IDs in your localstorage, by doing something like this.假设您通过执行以下操作将 ID 存储在本地存储中。 Also, since you mentioned that a jQuery solution would work for you, I'll show you how to do it in jQuery.
此外,由于您提到 jQuery 解决方案对您有用,我将在 jQuery 中向您展示如何进行。
Also, a few inital assumptions:此外,还有一些初步假设:
Resources used:使用的资源:
uniques
is a filtering function intially posted in this SO answer . uniques
是一个过滤 function 最初发布在这个 SO answer中。 I'm using it here, because it fits the purpose (removing (numerical) duplicates from a one-dimensional array), before writing to localstorageremoveItemAll
is used to remove eventual multiple occurrences of an ID. removeItemAll
用于删除最终多次出现的 ID。 The function was initiallly posted in this SO answer Final notes:最后说明:
// 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));
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.