Click here to Skip to main content
14,771,764 members
Please Sign up or sign in to vote.
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:

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 :

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

function myFunction() {
 return $('tr', $(this).find('tbody')).length;
}
 rowctr = $('#tableID').rowCount();
document.getElementById("demo").innerHTML = myFunction();


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


What I have tried:

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.

If you have a way to count total number of rows in JS only or tabulator that would be great.
Posted
Updated 20-Apr-20 4:12am

1 solution

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

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>
   

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




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900