使用分页选择django tables2中的所有行

Question

当表被拆分成多个页面时，如何使用CheckBoxColumn选择django_tables2表的所有记录？

我使用这个select all rows in django_tables2代码从一个页面选择所有记录，这个How to get information from Django_tables2 row?用它们做一些事情。

但是如何在分页限制中选择所有记录？当我在页面上来回走动时，还要保持复选框的状态吗？

Answer 1

我建议在模板中添加“全部选中”复选框。除了在视觉上检查当前页面的所有行（使用JavaScript）之外，检查它应该在视图中发出信号，表明用户打算检查所有行。

保持这些复选框的状态是另一回事。它可以导致一些非常大的列表中的簿记。如果需要为特定浏览器会话中的用户保留它们，可以将它们保存在request.session中，如果需要将它们持久保存到数据库，则可以创建模型以跟踪特定用户的特定记录的选择。

Answer 2

好的，现在我想出了这个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>