checkbox checkbox multi-select across pages, does not depend on back-end implementation
1. Demand
Enable multiple selections across pages when the table is paginated. Refresh or change the number of pagination items, and still allow multiple selections to be made correctly.
2. Implementation plan
Use sessionStorage to save the check box selection information on the client side, without relying on back-end implementation.
The value of each checkbox saves a unique id (you can also customize a property to save the unique id), listens to the checkbox onchange event, sessionStorage.setItem(id, ‘1’) when selected, and sessionStorage.setItem((id, ‘1’) when deselected) id, ‘0’), save the selection information.
Restore the checkbox selection state through the selection information saved in sessionStorage when refreshing.
3. Code implementation (based on jquery)
var ckbIP = (function () {
// sessionStorage key prefix
var lsKeyPrefix = "checkBoxInPageByCW:";
//Current page checkbox list selector string
var checkBoxSelectorStr;
// checkbox list name
var checkBoxName = "checkBoxInPage";
//All selection box id selector
var checkAllBoxId = "#checkAll";
return {
init: init,
getAllCheckedIdList: getAllCheckedIdList,
clear: clear
};
// Get the collection of all selected row IDs
function getAllCheckedIdList() {
var idArr = [];
var sessionStorageLength = sessionStorage.length;
for (var i = 0; i < sessionStorageLength; i + + ) {
var key = sessionStorage.key(i);
var index = key.indexOf(lsKeyPrefix);
if (index !== -1 & amp; & amp; sessionStorage.getItem(key) === '1') {
idArr.push(key.substring(index + lsKeyPrefix.length));
}
}
return idArr;
}
function init(param) {
debugger
initParam(param);
var listDom = $(checkBoxSelectorStr);
addEvent(listDom); // Add listening event
var allCheckFlag = true; // If all rows on the page are selected, the title is set to the selected state
for (var i = 0; i < listDom.length; i + + ) {
var tmpDom = listDom[i];
var id = $(tmpDom).val();
if (sessionStorage.getItem(lsKeyPrefix + id) === '1') {
$(tmpDom).attr('checked', 'checked');
}else {
$(tmpDom).attr('checked', false);
allCheckFlag = false;
}
}
if (allCheckFlag) {
$(checkAllBoxId).attr('checked', 'checked');
}
}
function initParam(param) {
if (param !== undefined & amp; & amp; param !== null) {
if (param.checkAllId !== undefined) {
checkAllBoxId = "#" + param.checkAllId;
}
if (param.checkBoxName !== undefined) {
checkBoxName = param.checkBoxName;
}
}
checkBoxSelectorStr = "input[name='" + checkBoxName + "']";
}
//Add listening event
function addEvent(curListDom) {
curListDom.on('change', onCheckChange);
$(checkAllBoxId).on('click', onCheckAllClick);
}
//Clear sessionStorage when the page is closed
function clear() {
debugger
var delKeyArr = []; // The key set to be deleted. Deletion will cause the sessionStorage length to change dynamically, so it must be recorded first.
var length = sessionStorage.length;
for (var i = 0; i < length; i + + ) {
var key = sessionStorage.key(i);
var index = key.indexOf(lsKeyPrefix);
if (index !== -1) {
delKeyArr.push(key);
}
}
var delKeyLength = delKeyArr.length;
for (var j = 0; j < delKeyLength; j + + ) {
sessionStorage.removeItem(delKeyArr[j]);
}
}
// Select all checkboxes
function onCheckAllClick() {
debugger
var checkAllStatus = $(checkAllBoxId).attr('checked');
var curPageCheckListDom = $(checkBoxSelectorStr); // Current page check box
if (checkAllStatus === 'checked') {
curPageCheckListDom.attr('checked', 'checked');
for (var i = 0; i < curPageCheckListDom.length; i + + ) {
var curTmpDom = curPageCheckListDom[i];
var id = $(curTmpDom).val();
sessionStorage.setItem(lsKeyPrefix + id, '1'); // Select
}
}else {
curPageCheckListDom.attr('checked', false);
for (var i = 0; i < curPageCheckListDom.length; i + + ) {
var curTmpDom = curPageCheckListDom[i];
var id = $(curTmpDom).val();
sessionStorage.setItem(lsKeyPrefix + id, '0'); // Not selected
}
}
}
function onCheckChange(event) {
debugger
var id = $(this).val();
var checkStatus = $(this).attr('checked');
if (checkStatus === 'checked') {
sessionStorage.setItem(lsKeyPrefix + id, '1'); // Select
var curlistDom = $(checkBoxSelectorStr + ":not(:checked)"); // The check box that is not checked on the current page
if (curlistDom. length === 0) {
$(checkAllBoxId).attr('checked', 'checked');
}
}else {
sessionStorage.setItem(lsKeyPrefix + id, '0'); // Not selected
$(checkAllBoxId).attr('checked', false); // Set the title check box to unchecked
}
}
})();
4. Use
- Introduce jquery and the above js file
- Add select all checkbox and list checkbox to the page
<%--select all checkbox--%>
<th><input id="testId" type="checkbox" /></th>
<%--List check box, value value is unique id--%>
<td>
<input type="checkbox" name="testName" value="${item.id}" />
</td>
- Initialize and clear sessionStorage when the page is closed.
$(function () {
ckbIP.init({
checkAllId: 'testId', // All selection box id
checkBoxName: 'testName' // List check box name
});
// When the page is closed, sessionStorage must be cleared. The page closing event depends on the specific page.
closeDom.click(function () {
ckbIP.clear();
});
});
- Get the checked list id collection method
var idArr = ckbIP.getAllCheckedIdList();
5. github address
GitHub – chocolatecw/ckbIP: checkbox multi-select across pages, does not depend on back-end implementation
If it’s useful, remember to give it a star!