使用JavaScript统计Django生成分页表格所有页的汽车颜色数量

你的现有代码只能统计当前页数据的原因很简单：前端分页每次仅渲染10条数据到页面表格中，JS读取DOM只能拿到当前页渲染的内容，自然统计不到其他页的数据。
推荐优先使用后端直接统计的方案，性能更高、逻辑更简单：

方案1：Django后端直接输出统计值（首选） #

你用的filter.qs本身就是当前筛选条件（年/月/周维度）下的全量数据，直接在后端完成统计传递到模板即可，完全不需要依赖前端JS读取表格：

1. 修改你的Django视图代码，在渲染模板前添加统计逻辑：

# 其他视图逻辑不变，新增以下统计代码
red_count = filter.qs.filter(Qa_Decision="red").count()
blue_count = filter.qs.filter(Qa_Decision="blue").count()
total_count = filter.qs.count()

# 把统计值加入模板上下文
context = {
    "filter": filter,
    "red_count": red_count,
    "blue_count": blue_count,
    "total_count": total_count,
    # 你的其他上下文变量保持不变
}
return render(request, "你的模板文件名.html", context)

2. 模板中直接渲染统计值即可，完全可以删掉原来的JS统计代码：

<!-- 展示统计的位置直接写，不需要JS动态计算 -->
<div>
  <p>总销售数量：<span id="total_count">{{ total_count }}</span></p>
  <p>红色车辆数量：<span id="red_count">{{ red_count }}</span></p>
  <p>蓝色车辆数量：<span id="blue_count">{{ blue_count }}</span></p>
</div>

方案2：前端全量统计（适合不想改后端的场景） #

如果不想修改后端代码，也可以在模板中提前把全量的颜色数据输出为JS变量，再做统计：

<script>
// 先把全量符合筛选条件的颜色值输出为JS数组，和分页无关
const allColourList = [{% for obj in filter.qs %}'{{ obj.Qa_Decision|escapejs }}'{% if not forloop.last %},{% endif %}{% endfor %}]

function counter(){
  let red = 0, blue = 0
  allColourList.forEach(colour => {
    if (colour === "red") red++
    else if (colour === "blue") blue++
  })
  const total = red + blue
  document.getElementById("total_count").innerText = total
  document.getElementById("red_count").innerText = red
  document.getElementById("blue_count").innerText = blue
}
</script>

内容的提问来源于stack exchange，提问作者Nirmal Kumar