How to show row count in tabulator

Question

0.00/5 (No votes)

See more:

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

        });

In html :

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>

What I have tried:

Also i saw on their github to use this:

JavaScript

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.

If you have a way to count total number of rows in JS only or tabulator that would be great.

Posted 14-Apr-20 6:38am

AskalotLearnalot

Updated 20-Apr-20 3:12am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

AskalotLearnalot · Accepted Answer · 2020-04-20T03:13:00

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;
                    },
                    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);
   //rest of your js if you have any.

css part:

CSS

.tabulator-footer {
                display: none;
            }

Html:

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>