0

On my View I have 4 tables. I am using jQuery Datatables for each of the tables so for one of my records that I'm displaying in the view looks like this:

enter image description here

WHAT I HAVE

var countAllTablesRows = $("table tbody.teu-tbody tr").length;
console.log("Total Rows In Every Table on Page - " + countAllTablesRows);
var rowCountMinusOne = countAllTablesRows - 1;
console.log("Total Rows In Every Table on Page Minus One - " + rowCountMinusOne);

MY GOAL

When a user clicks the "Delete" link, I want to count all of the rows in each of the tables tbody elements. However, I only want to count the table rows where there is actual data.. not the tables that have one row saying "No data available in table".

I was thinking of maybe using .each() to only get tables that don't contain "No data available in table", but I'm not sure of how to attack this.

Any help is appreciated.

Improve this question
3
  • May be similar to this, have a look: stackoverflow.com/a/50650239/2494754 Commented Sep 19, 2018 at 16:48
  • It would be nice to see your html. Commented Sep 19, 2018 at 16:50
  • Add a class on the rows (or table) with ($("tr.hasData").length) or without data ($("tr:not(.hasNoData)").length), or count the Delete links, use .filter() to count only rows with more than one column, ... Commented Sep 19, 2018 at 16:54

2 Answers 2

Reset to default
1

As you are using DataTables, there are a few datatable API options to return the number of rows in your table.

rows().count() is one way. This is handy if you want to get a count of table rows given specific circumstances, such as number of selected rows.

var table = $("#table-selector")
table.DataTable().rows().count()

.data() is another way. .data() returns all the data in the table as an array, from which you can simply call .length to get the length of the array.

var table = $("#table-selector")
table.DataTable().data().length

Both of the above methods work the same way. .data() simply returns all the data in the table, while .rows() may or may not return all data, as you can provide specific selectors to the .rows() function. In both cases, you can use .length or .count(). You have some flexibility.

As you have multiple tables, you can modify any of these to grab the data from all the tables all at once.

var table = $("#table-selector, #table-selector-two, #table-selector-three")
table.DataTable().rows().count()

This snippet will provide the count for tables #table-selector, #table-selector-two, and #table-selector-three. If you have a common class for all of them, this will work as well. You didn't provide your HTML, so I can only guess at how you are selecting your tables.

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Sorry, I don't think I added this in my question, but I only need the row count for the rows in the <tbody>.. not <thead>
If you are using DataTables, this shouldn't consider the header.
Okay, well I am using what you provided: var allTables = $("table"); var rowCount = allTables.DataTable().rows().count(); console.log(rowCount); and I'm getting 8.. the expected value should be 2
Do you have other tables that have been loaded into the DOM? var allTables = $("table"); will load every table in the DOM, so thatwill throw off your results. It would be better if you had a more accurate selector, such as a parent div or maybe apply a class to each of the tables you want a count of.
I added a class name and that did it. Thanks
|
0

You can use the JQuery ':not' and ':contains' to filter your rows, like this:

var countAllTablesRows = $("table tbody.teu-tbody tr:not:contains(No data)").length;

This will filter the rows, so only the rows not containing the text 'No data' will be counted.

Improve this answer

3 Comments

I get red squiggly under data.. saying 'unexpected value'. I need single quotes
Once I use your code, in the console I am receiving an error: Unable to get property 'replace' of undefined or null reference
Because it needs to be a subquote. $("table tbody.teu-tbody tr:not:contains('No data')")

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.