After research and help, here is what I did:
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;
},
dataLoad: 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);
css part:
.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>