在制表符中显示行数

Question

在 DataTables 中，我们具有显示第 1 行（共 100 行）的功能。我想在制表符中做相同或相似的事情。我使用了这种方法，它 return 是空的 table:

JavaScript

var tabulator_table = new Tabulator("#example", {
    columns: [
        { title: "", field: "", headerFilter: "input" },
        { title: "", field: "", headerFilter: "input" },
        { title: "", field: "", headerFilter: "input" },
        { title: "", field: "", headerFilter: "input" },
        { title: "", field: "", headerFilter: "input" },
        { title: "", field: "", headerFilter: "input" },
    ],
    //this part should return row count
    dataFiltered: function (data, field, type, value) {
        //data - the subset of the total table data that has passed the filter and is now visible
        //field - the field being filtered
        //type - the type of filter being used
        //value - the value of the filter

        //set text in info element to show the number of rows and filters currently applied
        $("#example-table-info").text("rows:" + data.length + " of " + $("#tableID").Tabulator("getData").length +
        ", filter:" + field + type + value);
    }
 });

HTML

<div class="footer">
    <p id="example-table-info"></p>
    <div id="myButtons"> Export </div>
</div>

错误是："tabulator is not a function"

我也尝试过使用另一种方法： JavaScript

function myFunction() {
    return $('tr', $(this).find('tbody')).length;
}

rowctr = $('#tableID').rowCount();
document.getElementById("demo").innerHTML = myFunction();

HTML

<p id="demo"></p>

我也在他们的 github 上看到使用这个：

var activeRowCount = table.getDataCount(true);

但我不知道如何或在何处应用它以及 return 我的页脚标记中的值。谢谢。

Answer 1

您不应尝试从外部操作 table 行内的元素。它使用虚拟 DOM，因此可以在不通知的情况下重置这些组件。

另外，由于虚拟 DOM，当您进行查询时，您所查询的大部分元素可能实际上并不存在。所以你不能那样计算行数。此外制表符不是使用标准 table 标签构建的，因此寻找 tr 标签将无法正常工作

rownum 格式化程序

如果要在一行旁边显示行号，请检查 Built In Formatters Documentation 并查看 rownum 格式化程序，这会自动处理：

{title:"Example", field:"example", formatter:"rownum"}

列计算

或者您可以考虑使用 Column Calculations 并使用 count 计算，在计算行中显示此信息.

{title:"Example", field:"example", bottomCalc:"count"}

自定义页脚

或者您可以查看 Adding an custom element to the footer 然后使用您的 dataFiltered 回调，尽管我也会使用dataLoaded回调以及覆盖所有基地

//define update function
function updateFooter(data){
   var el = document.getElementByID("row-count");
   el.innerHTML = data.length;
}

var table = new Tabulator("#example-table", {
    columns:[...], //define your columns
    footerElement:"<span id='row-count'></span>", //add element element to footer to contain count
    dataFiltered: updateFooter, //call updateFooter function when callback triggered
    dataLoaded: updateFooter, //call updateFooter function when callback triggered
});

Answer 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>

Answer 3

根据 beNiceWeAlLearning 的回答，我将其更新为 Tabulator 5.1。

我也改变了一些东西，这是我的代码：

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" },
    ],
    footerElement: '<span class="tabulator-counter float-left">'+
        'Showing <span id="search_count"></span> results out of <span id="total_count"></span> '+
        '</span>',
});

tabulator_table.on("dataLoaded", function(data){
    $("#total_count").text(data.length);
});

tabulator_table.on("dataFiltered", function(filters, rows){
    $("#search_count").text(rows.length);
});

CSS

.tabulator-counter {
    color: #555;
    margin: 3px 8px 8px 8px;
}

请注意，原始 HTML 代码已集成到 Javascript 代码中，部分原始 Javascript 因不必要而被删除。

在制表符中显示行数

Show row count in tabulator

javascript

tabulator

rownum 格式化程序

列计算

自定义页脚