查找 Tabulator 表的行数答案

【问题标题】：Find # of rows of Tabulator table查找 Tabulator 表的行数
【发布时间】：2021-09-02 21:06:10
【问题描述】：

我在一个网站上有一张使用制表符制作的表格。有没有办法随时获取表的行数。比如table.size还是table.length？

table = new Tabulator("#example-table", { 身高：405，
分页大小：50，分页：“本地”，数据：表数据，列：[...]}）；

【问题讨论】：

【解决方案1】：

一行：

document.querySelectorAll('.tabulator-row').length;

Tabulator 生成的所有行都分配给class="tabulator-row"

const tableData=[{id:1,name:"Oli Bob"},{id:2,name:"Mary May"},{id:3,name:"Christine Lobowski"},{id:4,name:"Brendon Philips"},{id:5,name:"Margret Marmajuke"},{id:6,name:"Frank Harbours"},{id:7,name:"Jamie Newhart"},{id:8,name:"Gemma Jane"},{id:9,name:"Emily Sykes"},{id:10,name:"James Newman"},{id:11,name:"Martin Barryman"},{id:12,name:"Jenny Green"},{id:13,name:"Alan Francis"},{id:14,name:"John Phillips"},{id:15,name:"Ed White"},{id:16,name:"Paul Branderson"},{id:17,name:"Gemma Jane"},{id:18,name:"Emma Netwon"},{id:19,name:"Hannah Farnsworth"},{id:20,name:"Victoria Bath"}];

const table = new Tabulator("#example-table", {
  height: "311px",
  layout: "fitColumns",
  data: tableData,
  columns: [{
    title: "Name",
    field: "name"
  }]
});


let rowQty = document.querySelectorAll('.tabulator-row').length;

console.log(rowQty);

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tabulator-tables@4.9.3/dist/css/tabulator.min.css">
<div id='example-table'></div>
<script src="https://cdn.jsdelivr.net/npm/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>

【讨论】：

Tabulator 表格是一个 div 网格。

【解决方案2】：

检查这是否对您的问题有帮助：

Javascript：

var tabulator_table = new Tabulator("#example", {
    columns: [
        { title: "", field: "", bottomCalc: "count", headerFilter: "input" },
        { title: "", field: "", bottomCalc: "count", headerFilter: "input" },
        { title: "", field: "", bottomCalc: "count", headerFilter: "input" },
        { title: "", field: "", bottomCalc: "count",headerFilter: "input" },
        { title: "", field: "", bottomCalc: "count", headerFilter: "input" },
        { title: "", field: "", bottomCalc: "count", headerFilter: "input" },
    ],
    dataFiltered: function(filters, rows) {
        var el = document.getElementById("search_count");
        el.innerHTML = rows.length;
    },
    dataLoaded: function(data) {
        var el = document.getElementById("total_count");
        el.innerHTML = data.length;
    },
});

var total_count = $(".tabulator-footer").find('.tabulator-cell:first-child()').text();
$("#total_count").text(total_count);
//rest of your js if you have any.

CSS：

.tabulator-footer {
    display: none;
}

HTML：

<span style="color:#102D4F;font-size:12px;font-family:Arial, Helvetica, sans-serif">
  Showing <span id="search_count"></span> results in total <span id="total_count"></span> 
</span>

学分：beNiceWeAlLearning

【讨论】：