在制表器中显示行数

Question

在 DataTables 中，我们具有显示 100 行中的第 1 行的功能。我想在制表器中执行相同或类似的操作。我使用了这种方法，它返回空表：

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);
    }
 });

超文本标记语言

<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();

超文本标记语言

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

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

var activeRowCount = table.getDataCount(true);

但我不知道如何或在哪里应用它并返回页脚标记中的值。谢谢。

Answer 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" },
    ],
    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;
}

超文本标记语言

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