当表格被拆分为多个页面时，如何使用 CheckBoxColumn 选择 django_tables2 表格的所有记录？
我已使用此 select all rows in django_tables2 代码从一页中选择所有记录，并使用此 How to get information from Django_tables2 row? 对它们进行处理。
但是如何跨分页限制选择所有记录？ 当我在页面上来回移动时还保持复选框的状态？
【问题讨论】：
标签： checkbox pagination django-tables2
我建议在您的模板中添加一个“全选”复选框。除了直观地检查当前页面的所有行（使用 JavaScript）之外，它被检查应该在你的视图中表明用户打算检查所有行的逻辑。
保持这些复选框的状态是另一回事。它可能导致在一些非常大的列表中记账。如果需要在特定浏览器会话中为用户保留它们，您可以将它们保留在 request.session 中，如果它们需要持久保存到数据库中，您可以创建一个模型来跟踪对某个记录的选择某个用户。
【讨论】：
好的，现在我想出了这个 JavaScript/jQuery 解决方案。它涉及两个方面。首先，当表格的排序顺序改变、表格被过滤或导航到另一个页面并再次返回表格时，存储和显示选中的复选框。其次，当单击表头上的“全选”按钮时，检查并存储表页上的所有复选框。在这里，我坚持选择表格中的所有行，而不仅仅是显示在一个表格页面上的行（打开分页）。选中的复选框存储在浏览器的会话存储中。功能肯定有改进的余地，我不太喜欢对表的所有行进行迭代，但我还没有找到更好的解决方案。 我仍然认为在 django-tables2 中提供这种功能会很好。也许在未来的某个版本中？
复选框列在我的 tables.py 中称为“selvars”
class dataset_varsTable(tables.Table):
selvars=tables.CheckBoxColumn(accessor='pk',attrs = { "th__input": {"onclick": "toggle(this)"}}, orderable=False)
... (other table columns)
这是我的模型的整数主键
class vars(models.Model):
idvar=models.IntegerField('Var.ID', primary_key=True)
...
以及 HTML 模板中的 JavaScript 和 jQuery 函数与表格
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var storage_name="checkedvars"; // name of session storage
// function to store/remove checked varids in session storage
function update_checkedvars(varid, check_status){
var current_checked=[];
if (sessionStorage.getItem(storage_name)){
current_checked=sessionStorage.getItem(storage_name).split(",");
}
if (isNaN(parseInt(varid))==false && check_status==true){
current_checked.push(varid);
// store checked varid in session storage without duplicates
sessionStorage.setItem(storage_name, Array.from(new Set(current_checked)));
} else if (isNaN(parseInt(varid))==false && check_status==false){
// remove unchecked varid from session storage
sessionStorage.setItem(storage_name, current_checked.filter(e => e !== varid));
}
}
// toggle button
function toggle(source) {
checkboxes = document.getElementsByName('selvars');
for(var i in checkboxes){
checkboxes[i].checked = source.checked;
update_checkedvars(checkboxes[i].value, checkboxes[i].checked);
}
}
$(document).ready( function() {
// display checkboxes according to selected varids in session storage
var current_checked=[];
if (sessionStorage.getItem(storage_name)){
current_checked=sessionStorage.getItem(storage_name).split(",");
checkboxes = document.getElementsByName('selvars');
for(var i in checkboxes){
if(current_checked.includes(checkboxes[i].value)){
checkboxes[i].checked=true;
}
}
}
// save/remove checked/unchecked varid in session storage
$(".selvars").click( function(event) {
var varid=event.target.value
var check_status=event.target.checked
update_checkedvars(varid, check_status);
});
});
</script>
【讨论】：