In DataTables we have the feature of showing rows 1 of 100. I want to do same or similar thing in tabulator. I used this approach and it returns empty 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>

the error is: "tabulator is not a function"

I also tried to use another approach: JavaScript

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

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

HTML

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

Also i saw on their github to use this:

var activeRowCount = table.getDataCount(true);

But i don't know how or where to apply it and return the value in my footer tag. Thank you.

In DataTables we have the feature of showing rows 1 of 100. I want to do same or similar thing in tabulator. I used this approach and it returns empty 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>

the error is: "tabulator is not a function"

I also tried to use another approach: JavaScript

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

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

HTML

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

Also i saw on their github to use this:

var activeRowCount = table.getDataCount(true);

But i don't know how or where to apply it and return the value in my footer tag. Thank you.

• javascript
• tabulator

3 Answers 3

After research and help, here is what I did:

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>

You should not try to manipulate elements inside the table rows from outside. It uses a virtual DOM and so could reset those ponents without notice.

Also because of the virtual DOM it is likely that most of the elements you are after do not actually exist when you make the query. so you wouldn't be able to count the rows that way. Also tabulator isn't built using standard table tags so looking for tr tags wouldn't work for that reason

rownum Formatter

If you want to display the row number next to a row, checkout the Built In Formatters Documentation and have a look at the rownum formatter, this will take care of things automatically:

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

Column Calculation

Alternatively you could look at using Column Calculations and using the count calculation, to display this info in a calculation row.

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

Custom Footer

Or you could look at Adding an custom element to the footer and then using your dataFiltered callback as above, although i would also use the dataLoaded callback as well to cover all bases

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

Based on answer by beNiceWeAlLearning I updated it for Tabulator 5.1.

I also changed a few things, here's my code:

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

Please note that original HTML code is here integrated inside Javascript code, and some of original Javascript was dropped because resulted unnecessary.