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.

Grizzly
  • 5,873
  • 8
  • 56
  • 109
  • May be similar to this, have a look: https://stackoverflow.com/a/50650239/2494754 – NVRM Sep 19 '18 at 16:48
  • It would be nice to see your html. – Poul Bak Sep 19 '18 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, ... – Andreas Sep 19 '18 at 16:54

2 Answers2

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.

Rich
  • 1,567
  • 14
  • 24
  • Sorry, I don't think I added this in my question, but I only need the row count for the rows in the .. not – Grizzly Sep 19 '18 at 17:23
  • If you are using DataTables, this shouldn't consider the header. – Rich Sep 19 '18 at 17:24
  • 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 – Grizzly Sep 19 '18 at 17:26
  • 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. – Rich Sep 19 '18 at 17:31
  • I know for a fact that DataTables does not count the 'No Data' message and the headers as part of the `.count()` operation; I just tested it myself to be sure. – Rich Sep 19 '18 at 17:34
  • 1
    I added a class name and that did it. Thanks – Grizzly Sep 19 '18 at 17:39
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.

Poul Bak
  • 10,450
  • 5
  • 32
  • 57
  • I get red squiggly under data.. saying 'unexpected value'. I need single quotes – Grizzly Sep 19 '18 at 17:14
  • Once I use your code, in the console I am receiving an error: **Unable to get property 'replace' of undefined or null reference** – Grizzly Sep 19 '18 at 17:16
  • Because it needs to be a subquote. `$("table tbody.teu-tbody tr:not:contains('No data')")` – Rich Sep 19 '18 at 17:16