在制表符中显示行数

Question

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

 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不是函数”

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

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

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

而且由于存在虚拟DOM，所以查询时，您所追求的大多数元素可能实际上并不存在。因此您将无法以这种方式计算行数。此外，制表器不是使用标准表格标签构建的，因此，出于该原因，寻找tr标签将不起作用

rownum Formatter

如果要在行旁边显示行号，请签出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

经过研究和帮助，这是我所做的：