如何从一页到另一页累计添加bottomCalc总和

问题描述 投票:0回答:1

我正在尝试从页面到页面累积添加来自bottomCalc的值。 BottomCalc 仅添加当前显示行的值。

{ title: $t('table.amount'), field: 'amount', headerHozAlign: 'center', hozAlign: 'center', formatter: "money", bottomCalc: "sum", },

这是我在组件页面中传递给制表器的列信息。我不知道如何编写一个函数来累计计算bottomCalc总和,逐页累加值。 我尝试搜索文档,找不到任何解决方案。

tabulator
1个回答
0
投票

您可以使用自定义函数来计算每页上累积的总和,而不是使用

sum
的默认
bottomCalc
选项。在下面的示例中,我获取页面大小和当前页码来计算应计算多少行。然后将截至该点的每一行的值相加。这样每页底部都会显示累计金额:

const tabledata = [
  { id: 1, fullName: 'Oli Bob', age: '12', color: 'red' },
  { id: 2, fullName: 'Mary May', age: '1', color: 'blue' },
  { id: 3, fullName: 'Christine Lobowski', age: '42', color: 'green' },
  { id: 4, fullName: 'John Smith', age: '30', color: 'red' },
  { id: 5, fullName: 'Tim Burton', age: '51', color: 'blue' },
  { id: 6, fullName: 'Sean Nimble', age: '72', color: 'green' },
  { id: 7, fullName: 'Kurt Roman', age: '16', color: 'red' },
  { id: 8, fullName: 'Evan Crawley', age: '8', color: 'blue' },
  { id: 9, fullName: 'Christine Lobowski', age: '22', color: 'green' },
  { id: 10, fullName: 'Kayla Martinez', age: '27', color: 'green' }
]

const accCalc = (values, data, calcParams) => {
  const pageSize = table.getPageSize()
  const pageNum = table.getPage()
  const count = pageSize * pageNum
  
  let sum = 0
  
  values.forEach((value, index) => {
    if (index < count) {
      sum = sum + +value
    }
  })
  
  return sum
}

const table = new Tabulator('#example-table', {
  data: tabledata,
  columns: [
    { title: 'Name', field: 'fullName' },
    { title: 'Age', field: 'age', bottomCalc: accCalc },
    { title: 'Favourite Color', field: 'color' }
  ],
  pagination:true,
  paginationSize:4
})
<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://unpkg.com/[email protected]/dist/css/tabulator.min.css" rel="stylesheet" />
  <script src="https://unpkg.com/[email protected]/dist/js/tabulator.min.js"></script>
</head>

<body>
  <div id="example-table"></div>
</body>

</html>

© www.soinside.com 2019 - 2024. All rights reserved.