javascript - 制表符,有没有办法将页面总和添加到页脚?

标签 javascript jquery tabulator

Tabulator 有一个名为Column Calculations 的模块。

我需要添加页面总和总和

Sample Image of sum of page and sum of total

例如,我可以添加页脚来计算总和,但我无法添加可见行总和,或者换句话说当前页面的总和仅在同一时间。

我可以将页脚添加到表格的bottomtop:topCalc& bottomCalc

例如,我可以添加价格总和

正如您在下面的示例中看到的,我在此处添加了价格总和。

我还将示例放在这里: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",,将调用计算函数,我们可以看到price列的sum

有一个名为自定义计算的选项,我可以添加一个函数来仅计算当前页面值,但我无法计算总计页面值

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

最佳答案

制表器无法按照您的要求布局表格。您需要手动创建一个页脚元素来处理此问题,然后使用 Pagination Callbacks计算出要显示的值

关于javascript - 制表符,有没有办法将页面总和添加到页脚?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59707942/

相关文章:

javascript - REST API 从 XMLHttpRequest 接收 'null' - 与 Postman 的相同请求有效吗?

Jquery:如何让菜单向右而不是向左扩展

jquery - 除了样式化的文件输入按钮外,如何显示要上传的文件名?

制表符 'autocomplete' 问题

javascript - jQuery 什么代替 $(this).parent().children()

javascript - Mapbox 更改源属性

javascript - 使用带有静态文件而不是服务器的 Karma 进行 AngularJS 端到端测试

javascript - 如何制作跨度以在 td 内重叠文本?

javascript - Tabulator 4 我可以扩展格式化程序而不是创建自定义格式化程序吗?

制表符默认排序数据