时间戳

首页 > 解决方案 > 制表符，有没有办法在页脚中添加页面总和？

javascript - 制表符，有没有办法在页脚中添加页面总和？

问题描述

Tabulator有一个名为Column Calculations.

我需要同时添加sum of page和sum of total

页面总和和总和的示例图像

例如，我可以为计算添加页脚sum of total，但我不能同时添加sum of visible rows或换句话说sum of current page only。

bottom我可以在表格或表格中添加页脚top：topCalc& bottomCalc。

例如我可以sum添加price添加

正如您在下面的示例中看到的，我在这里添加了价格总和。

我也把例子放在这里：https ://jsfiddle.net/o2ycm5dp/

function generateTable(data) {
  tableInstance = new Tabulator("#simpleTable", {
    layout: "fitColumns",
    resizableColumns: false,
    selectable: false,
    paginationSize: 3,
    responsiveLayout: "hide",
    ajaxFiltering: false,
    pagination: "local",
    columns: [{
        title: "name",
        field: "name",
      },
      {
        title: "price",
        field: "price",
        bottomCalc: "sum",
      },

    ],
  });
  tableInstance.setData(data);
}

$(document).ready(function() {
  var data =     [{
    name: "Tiger Nixon",
    price: "320800"
}, {
    name: "Garrett Winters",
    price: "170750"
}, {
    name: "Ashton Cox",
    price: "86000"
}, {
    name: "Cedric Kelly",
    price: "433060"
}, {
    name: "Airi Satou",
    price: "162700"
}, {
    name: "Brielle Williamson",
    price: "372000"
}, {
    name: "Herrod Chandler",
    price: "137500"
}];
  generateTable(data);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://unpkg.com/tabulator-tables@4.5.3/dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/tabulator-tables@4.5.3/dist/js/tabulator.min.js"></script>
<div id="simpleTable"></div>

在这一行 : bottomCalc: "sum",，将调用计算函数，我们可以sum看到price列。

有一个名为的选项Custom Calculations，我可以添加一个函数来计算current page values，但我不能计算total pages values.

另一种解决方案可能append是页脚的 html 元素，但我认为这不是一个好的解决方案。因为我应该处理所有与Tabulator页脚相关的功能。

标签： javascriptjquerytabulator

解决方案

Tabulator 无法按您的要求布置表格。您需要手动创建一个页脚元素来处理此问题，然后使用分页回调来计算要显示的值

推荐阅读